jquery - 如何修复jquery悬停中的连续动画

Question

如果您尝试在绿色盒子上悬停和悬停，每秒 5 次或更多次，您会看到盒子像球一样弹跳。我想要发生的是，当绿色框恢复到其原始大小（50px）时，将再次启用悬停。这样每当我做得更快时hover-in，hover-out动画就不会像弹跳一样。
希望你明白我的意思。
这是我的小提琴

Answer 1

如果您想使用现有代码并在完全放大/缩小（不使用jQuery.stop()）后禁用放大/缩小 X 时间段，您可以使用该data()方法在 DOM 元素上设置变量并使用setTimeout()清除它。在此示例中，缩小后两个操作都将被禁用 1 秒（1000 毫秒）。

$img.hover(
    function(){
       // do not zoom in if currently disabled
       if (!$(this).data('disabled')){
            $(this).animate({
               height: o.contentHeight,
               width: o.contentWidth,
               left: "-=" + leftDistance,
               top: "-=" + topDistance
            }, o.speed);  
        }             
    }, 
    function(){
       // do not zoom out if currently disabled
         if (!$(this).data('disabled')){
            // disable zoom in/out by setting 'disabled=true'
            $(this).data('disabled', true);
            // alias this to a variable
            var $this = $(this);
            // use setTimeout to clear the variable after 1000ms
            setTimeout(function(){ $this.data('disabled', false); }, 1000);
            $(this).animate({
               height: o.imageInitHeight,
               width: o.imageInitWidth,
               left: "+=" + leftDistance,
               top: "+=" + topDistance
            }, o.speed);
        }
    }            
);

Answer 2

这是因为动画被推送到队列中（并非所有动画同时播放）如果移动速度非常快，很多动画会排入队列，并按时间顺序播放。这是正常行为。

如果要修复此效果，则需要在每次开始另一个动画时清空动画队列。

使用此代码，您将获得您所期望的

$img.hover(
        function(){                
            $(this).stop(true).animate({
               height: o.contentHeight,
               width: o.contentWidth,
               left: "-=" + leftDistance,
               top: "-=" + topDistance
            }, o.speed);                
        }, 
        function(){
            $(this).stop(true).animate({
               height: o.imageInitHeight,
               width: o.imageInitWidth,
               left: "+=" + leftDistance,
               top: "+=" + topDistance
            }, o.speed);
        }            
    );

该stop(true)方法将重置未来动画的队列。

当然，这并不能解决整个问题，因为您现在的位置计算会出现剩余问题。

你应该回顾这部分，并尝试使用更简单的动画

这是一个工作示例：工作示例

Answer 3

要解决这样的问题，您可以利用 HoverIntent (Plugin)。

http://cherne.net/brian/resources/jquery.hoverIntent.html

使用简单，灵活。