Question

我有以下代码：

$('.active-bean-bag ul li').hover(function() { 
    var activeBeanBag = 'menu-' + $(this).attr("class");
    $('.active-bean-bag img.menu-image').fadeOut();
    $('.active-bean-bag img.menu-image').fadeIn(function(){
            $('.active-bean-bag img.menu-image').attr("src", '/images/'+activeBeanBag+'.png');
    });
});

然而，当我将鼠标悬停在另一个LI上时，看起来它在旧图像上淡出两次，然后输出然后输出增益然后淡入新图像？有什么想法吗？

更新：

$('.active-bean-bag ul li').mouseover(function() { 
    var activeBeanBag = 'menu-' + $(this).attr("class");
    var newImage = '/skins/temaplate/customer/images/'+activeBeanBag+'.png';
    var $img = $('.active-bean-bag img.menu-image');
    if ($img.attr('src') != newImage) {
        $img.fadeOut(function() {
            $(this).attr("src", newImage).fadeIn();
        });
    }
});

还尝试了同样的结果：

$(".active-bean-bag ul li").hover(function(e) {
    e.preventDefault();
        var activeBeanBag = 'menu-' + $(this).attr("class");
    $('.active-bean-bag img.menu-image').fadeOut(400, function() {
                $('.active-bean-bag img.menu-image').attr('src','/skins/template/customer/images/'+activeBeanBag+'.png');
        }).fadeIn(400);
});

Answer 1

试试这个：

$('.active-bean-bag ul li').mouseover(function() { 
    var activeBeanBag = 'basn0g' + $(this).attr("class");
    var newImage = 'http://www.schaik.com/pngsuite/'+activeBeanBag+'.png';
    var $img = $('.active-bean-bag img.menu-image');
    if ($img.attr('src') != newImage) {
        $img.fadeOut(function() {
            $(this).attr("src", newImage).fadeIn();
        });
    }
});

在这里摆弄：http://jsfiddle.net/grantman16/XPthr/4/

当您只使用一个参数悬停时，可以将函数绑定到mouseenter和mouseleave事件。这就是它消失两次的原因。请参阅此处的文档：http://api.jquery.com/hover/

Answer 2

对fadeIn()和fadeOut()的调用同时进行，争夺不透明度。相反，将fadeIn()来电链接到fadeOut()：

的回调

$('.active-bean-bag ul li').hover(function() { 
var activeBeanBag = 'basn0g' + $(this).attr("class");
$('.active-bean-bag img.menu-image').fadeOut(function(){
    $('.active-bean-bag img.menu-image').attr("src", 'http://www.schaik.com/pngsuite/'+activeBeanBag+'.png');
    $('.active-bean-bag img.menu-image').fadeIn();
});

}）;

就像在这个jsfiddle：http://jsfiddle.net/XPthr/5/。（我还将src分配更改为fadeIn()之前的分配，以便在新图像可见时淡入。

更改背景图像，淡出旧图像两次然后淡入新图像

2 个答案: