jQuery- собственный код конфликтует с Revolution Slider

Question

Я написал свой собственный маленький jquery-код для эффекта наведения, он работал отлично. Но когда я добавил ползунок революции на страницу, эффект парения перестал работать по-своему. Когда вы наводите кнопки соцмедиа, вы видите черный фон перед тем, как треугольники скользят, этот черный фон там раньше не появлялся.

Это мой код:

    <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;
        });

Я пытался исправить это с no.conflict() но безуспешно. Когда я помещаю ползунок революции в режим отладки, он работает правильно, что я нахожу странным.

Вот сайт Кнопки соцмедиа расположены в нижнем колонтитуле.

Заранее спасибо всем, кто нашел время, чтобы взглянуть на это.