Jquery -当频繁地悬停多次时，元素仍然会摇晃很长时间

Jquery - When hovered multiple times frequently, element still shakes for a long time

本文关键字：元素 长时间 摇晃 悬停 Jquery      更新时间：2023-09-26

当我离开我的容器鼠标反弹上下。但这里的问题是，当我连续(非常快地)这样做一段时间，然后停止这样做，它仍然摇晃很长一段时间。所以基本上我想让动画在我离开容器的最后一个鼠标时停止。PS -我已经试过$('.container').stop()了。想象一下，当您频繁地将元素快速悬停时。(不让前一个动画完成)然后你突然停下来。所以动画也应该停止。但它没有!这是小提琴。http://jsfiddle.net/WKy56/

这是我的jquery代码: 
$('.container').mouseleave(function(){
    doBounce($('.container'), 2, '10px', 50);
}); 
function doBounce(element, times, distance, speed) {
    for(var i = 0; i < times; i++) {
        element.animate({marginTop: '-='+distance}, speed)
        .animate({marginTop: '+='+distance}, speed);
    }  
}

PSS -如果你不能回答或不能理解这个问题，请阅读下面的评论，至少不要投票反对。

$('.container').not(':animated').mouseleave(...

编辑:这应该是足够的:

$('.container').mouseleave(function(){
    doBounce($('.container').not(':animated'), 2, '10px', 50);
});

我认为最好的解决方案是在元素上使用.finish()，因为它完成动画并且不会留下需要重置的不正确的上边距值。

$('.container').mouseleave(function(){
    doBounce($('.container'), 2, '10px', 50);
}); 
function doBounce(element, times, distance, speed) {
    element.finish();
    for(var i = 0; i < times; i++) {
        element.animate({marginTop: '-='+distance}, speed)
        .animate({marginTop: '+='+distance}, speed);
    }  
}
相关文章：