jquery - 将鼠标悬停在 li 列表上以更改图像，但无法赶上

Question

我有以下代码：

$(document).ready(function(){
$('.active-bean-bag ul li.bean-bag-image').mouseover(function() {
        var activeBeanBag = 'menu-' + $(this).attr("id");
        $('.active-bean-bag img.menu-image').stop(true, true).fadeOut();
        $('.active-bean-bag img.menu-image').fadeOut(function(){
                $('.active-bean-bag img.menu-image').attr("src", '/skins/template/customer/images/'+activeBeanBag+'.png');
                $('.active-bean-bag img.menu-image').fadeIn();
        });
});

});

但是，当您快速移动 li 选项以到达您想要的选项时，它不会赶上并显示不正确的图像

提前致谢

Answer 1

首先使用停止功能。这会取消所有排队的动画。

$('.selector').stop(true, true).fadeOut();

编辑:: 试试这个代码：

$(document).ready(function(){
$('.active-bean-bag ul li.bean-bag-image').mouseover(function() {
        var activeBeanBag = 'menu-' + $(this).attr("id");
        $('.active-bean-bag img.menu-image').stop(true, true).fadeOut(function(){
                $('.active-bean-bag img.menu-image').attr("src", '/skins/template/customer/images/'+activeBeanBag+'.png');
                $('.active-bean-bag img.menu-image').stop(true, true).fadeIn();
        });
});