jQuery- own code conflicts with Revolution Slider

Question

I have written my own little jquery code for a hover effect, it worked perfectly. But when i added the revolution slider to the page the hover effect stopt working corectly. When you hover the socialmedia buttons you see a black background just before the triangles slide in, this black background didn't apear there before.

This is my code:

    <div class="effect">
        <svg class="facebook-svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
            <path fill="#000000" d="M17.252,11.106V8.65c0-0.922,0.611-1.138,1.041-1.138h2.643V3.459l-3.639-0.015c-4.041,0-4.961,3.023-.961,4.961v2.701H10v4.178h2.336v11.823h4.916V15.284h3.316l0.428-4.178H17.252z"/>
        </svg>
        <div class="mask first"></div>
        <div class="mask second"></div>
    </div>

---

$( ".effect" ).hover(
            function() {

                $(".first", this).finish();
                $(".second", this).finish();

                if ( $( "img", this).length ) {
                    $width  = $('img', this).width() + 'px';
                    $height = $('img', this).height() + 'px';
                }
                if ( $( "svg", this).length ) {
                    $width  = $('svg', this).width() + 'px';
                    $height = $('svg', this).height() + 'px';
                }

                $( ".first", this ).css({"left" : $width, "top" : $height});
                $( ".second", this ).css({"left" : "-" + $width, "top" : "-" + $height});


                $( ".first", this ).css({"opacity" : "1"});
                $( ".second", this ).css({"opacity" : "1"});

                $( ".first", this ).filter(':not(:animated)').animate({
                                top: "-0",
                                left: "-0"
                              }, 200, function() {
                                // Animation complete.
                              });
                $( ".second", this ).filter(':not(:animated)').animate({
                                top: "+0",
                                left: "+0"
                              }, 200, function() {
                                // Animation complete.
                              });
              },
            function() {            
                $( ".first", this ).animate({
                                top: "+" + $height,
                                left: "+" + $width
                              }, 200, function() {
                                $( ".first", this ).css({"opacity" : "0"});
                              });
                $( ".second", this ).animate({
                                top: "-" + $height,
                                left: "-" + $width
                              }, 200, function() {
                                $( ".second", this ).css({"opacity" : "0"});
                              });

            $width = undefined;
            $height = undefined;
        });

I have tried fixing it with no.conflict() but with no luck so far. When i put the Revolution Slider to Debug mode it works correctly wich i find strange.

Here is the website The socialmedia buttons are located in the footer.

Thank you in advance to anyone that takes the time to look at this.