0

我为悬停效果编写了自己的小 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()但到目前为止没有运气。当我将 Revolution Slider 置于调试模式时，它可以正常工作，我觉得很奇怪。

这是网站 社交媒体按钮位于页脚中。

提前感谢任何花时间看这个的人。

4

0 回答 0