冻结动画/防止悬停的回调动画播放

Posted 2023-05-08

【中文标题】冻结动画/防止悬停的回调动画播放

【英文标题】：freezing animation/preventing callback animation of hover out from playing

【发布时间】：2012-12-07 10:29:52

【问题描述】：

我知道那里有一些类似的问题，但我正在尝试他们的解决方案，但它对我不起作用。

点击#hitbox后，如何停止下面的回调动画？在动画中，当#hitbox 悬停在上面时，div 会向外移动，当鼠标离开#hitbox 时，div 会回到原来的位置。我希望 div 在单击 #hitbox 后保持在其向外的位置，而不是移回。

var timeOut;
$('#hitbox').hover(
            function()   
                 clearTimeout(timeOut);

    // **some animation functions moving divs outward** e.g.:
    $('#div').stop().animate(
    
   'margin-left': '-500px',   
    , 1000, 'easeOutQuart'  
    ); 

                      // End first function

    ,

            function() 
                timeOut=setTimeout(function()

    // **some animation functions moving divs back in** e.g.:
    $('#div').animate(
      
    'margin-left':'0px',
    , 900, 'easeOutExpo'  );

                , 600); //end setTimeout

             //end second callback function
); //end hover

$('#hitbox').click(function() 
    $('#hitbox').css(
             'display': 'none',
             );

clearTimeout(timeOut);  // *****NOT WORKING*****


); // end click

单击#hitbox 后，div 将向上移动，但当我希望它们完全保持在向外的位置时，它们会收缩（向内移动）。

clearTimeout(timeOut); 没有按照其他一些问题的建议工作。我有一种感觉，我需要的还不止这些？正如您在代码中看到的，我还尝试将#hitbox 的显示立即设置为none。 感谢您的帮助！

【参考方案1】：

您可以在#hitbox 中添加一个clicked 类，用于检查mouseleave 处理程序的内容是否应该被执行：

$('#hitbox').click(function() 
    $(this).css(
        'display': 'none',
    );
    $(this).addClass('clicked');
);

hover 方法的第二个处理程序如下所示：

function() 

    if($(this).is(":not(.clicked)"))
        timeOut=setTimeout(function()  // setTimeout method retained instead of using delay() 
        // **some animation functions moving divs back in** e.g.:
        $('#div')/*.delay(600)*/.animate( // delay removed due to issues w/ animation queue buildup
            'margin-left': '0px',
        , 900, 'easeOutExpo');

       , 600); //end setTimeout
     // end  if()

 // end hover 

【讨论】：

在我的第二个悬停方法处理程序中，我将把“timeOut=setTimeout(function()”放在哪里？

@ShaltNot 您应该完全放弃超时，因为您并不真正需要它。如果您想延迟操作，只需将.delay(600) 添加到您的方法链中即可。我已将此添加到答案中。

啊。我也只是尝试在 if() 函数之前添加 timeOut，它起作用了！我也会测试 delay() 。谢谢！！此问题之前没有收到任何答案。

不幸的是，delay() 不是一个合适的方法，因为它重新创建了动画队列构建问题，我使用 clearTimeOut 来解决这个问题。不过，在 if() 之前放置 timeOut 似乎没有任何缺陷。我已经编辑了您的答案以反映这一点。随意重新修改！再次感谢！！

【参考方案2】：

虽然我喜欢@Asad 的回答，但看起来#hitbox 在您单击它时会消失，所以也许您真的只是想解除悬停 (mouseleave) 事件的绑定？如果是这样，只需替换它：

clearTimeout(timeOut);  // *****NOT WORKING*****

用这个：

$('#hitbox').unbind('mouseleave');

编辑：

Here's a jsFiddle.

（为了使这个快速而简单的演示工作，我添加了方块，在ready 处理程序中添加了您的代码，删除了easeOut 参数，并更改了动画的方向。）

【讨论】：

我想到了这个，但它很昂贵，因为您需要注销/注册事件处理程序，而不是仅仅添加/删除一个类。

这也有效！我没有足够的经验来说这是否是一种更好的方法，但是谢谢！巧妙利用显示的技巧：无...

@Asad - 我明白了。 （我不熟悉内部结构，所以我相信你的话。）另一个论点是，如果我们想在某个时候恢复 #hitbox，我们必须重新注册该事件，所以你的答案显然会更好。