Question

我在这个网页http://www.2eenheid.de/cloud/上有一个JQuery幻灯片。

“Cloud”页面有自己的背景图片。
将鼠标悬停在其他菜单项上会使用fadeIn和Out
但是当悬停在“云”菜单项上时也会发生这种情况。这让它看起来很乱。它只是在相同的图像中来回淡化。如何在我的代码中删除它？当bg img已经是相同的img时，不要做任何事。

JQUERY

    <script type="text/javascript">
    $(function () {
            var imgsrc = '';
            var newImg = '';
            imgsrc = $('.pikachoose').css('background-image');

            $('ul.slideshow-menu').find('a').hover(function () {
                newImg = $(this).attr('src');
                if (imgsrc === newImg) { return; }

                $('.pikachoose').stop().fadeOut('fast', function () {
                    $(this).css({
                        'background-image': 'url(' + newImg + ')'
                    }).fadeTo('slow', 1);
                });



            }, function () {

                $('.pikachoose').stop().fadeOut('fast', function () {
                    $(this).css({
                        'background-image': imgsrc 
                    }).fadeTo('slow', 1);
                });
            });

        }); 
    </script>

Answer 1

执行imgsrc = $('.pikachoose').css('background-image');时，imgsrc包含字符串

url(http://example.com/image.jpg)而不是

http://example.com/image.jpg

newImg包含http://example.com/image.jpg的位置因此比较失败。

尝试将imgsrc转换为正确的网址，如下所示：

new_imgsrc=imgsrc.replace(/url\(("|'|)|("|'|)\)/g,'');

然后尝试if

if (newImg === new_imgsrc){
    //do something
}

当相同图像时，幻灯片不会在悬停时淡入淡出

1 个答案: