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

Question

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

点击#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。 感谢您的帮助！

Answer 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 

Answer 2

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

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

用这个：

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

编辑：

Here's a jsFiddle.

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