Question

我有一个代码，如果我将鼠标设为li元素，它的高度会增加，其他两个lis的高度会减少。

$("li").mouseover(function(){   

var thisName    =   $(this).attr("name"),
    lis         =   [];

    lis[0]      =   $("li[name=first]");
    lis[1]      =   $("li[name=second]");
    lis[2]      =   $("li[name=third]");

$(this).animate({
    height: "200px"
}); 

for(i=0; i<lis.length; i++) {
    if(lis[i].attr("name")!=thisName) {
        lis[i].animate({
            height: "50px"
        });
    };
};  
});

我也有mouseleave的代码。这将使这三个li的高度恢复到100px。

当我鼠标移动时，而不是另一个li元素，一切正常。

但是如果我从li元素中鼠标移动并将mouseter转换为另一个元素，那么我会遇到问题。然后：第一个mouseleave事件将起作用，并将每个li重新调整为100px，然后mouseenter事件将起作用。

这看起来很糟糕。我想在鼠标中心或鼠标离开事件发生时取消所有其他动画。

Answer 1

您可以使用.stop（true）来停止动画

$("li").mouseover(function () {

    var thisName = $(this).attr("name"),
        lis = [];

    lis[0] = $("li[name=first]");
    lis[1] = $("li[name=second]");
    lis[2] = $("li[name=third]");

    //use .stop(true)
    $(this).stop(true).animate({
        height: "200px"
    });

    for (i = 0; i < lis.length; i++) {
        if (lis[i].attr("name") != thisName) {
            lis[i].stop(true).animate({
                height: "50px"
            });
        };
    };
});

您的代码可以像

一样清理

var $lis = $("li").mouseover(function () {
    //use .stop(true)
    $(this).stop(true).animate({
        height: "200px"
    });
    $lis.not(this).stop(true).animate({
        height: "50px"
    });
});

您也可以使用.hover（）注册mouseenter和mouseleave处理程序，如

var $lis = $("li").hover(function () {
    //use .stop(true)
    $(this).stop(true).animate({
        height: "200px"
    });
    $lis.not(this).stop(true).animate({
        height: "50px"
    });
}, function () {
    $lis.stop(true).animate({
        height: "100px"
    });
});

演示：Fiddle

检查第一个事件是否发生但第二个事件没有发生

1 个答案: