jquery - 同一图像时，Sildeshow 在悬停时不会褪色

Question

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

1. “云”页面有自己的背景图片。
2. 将鼠标悬停在其他菜单项上会更改此背景图像，并带有淡入和淡出
3. 但它也会在悬停在“云”菜单项上时发生。这让它看起来很乱。它只是来回淡入同一图像。如何在我的代码中删除它？当 bg img 已经是同一个 img 时，让它什么都不做。

查询

    <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为正确的 URL，如下所示：

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

然后尝试if

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