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

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

单击

#hitbox

后，如何停止下面的回调动画？在动画中，当鼠标悬停在上方时，div将向外移动，当鼠标离开时，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（超时）
与其他一些问题中的建议不一样。我觉得我需要的不止这些？正如您在代码中看到的，我还尝试将
#hitbox
的显示立即设置为
none
。
谢谢你的帮助
 您可以将单击的
类添加到
#hitbox
，该类可用于检查是否应执行
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 

虽然我喜欢@Asad的答案，但当你点击它时，
#hitbox
似乎消失了，所以也许你真的只是想解除悬停（
mouseleave
）事件的绑定？如果是，只需更换以下部件：

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

为此：

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

编辑：


（为了让这个快速而肮脏的演示工作，我添加了方块，在
ready
处理程序中添加了代码，删除了
easeOut
参数，并更改了动画的方向。）
在悬停方法的第二个处理程序中，我将在哪里放置“timeOut=setTimeout（function（）{”？@shaltno您不应该完全放弃超时，因为您并不真正需要它。如果您想延迟操作，只需将
.delay（600）
添加到您的方法链中。我已将此添加到答案中。啊。我还尝试在If（）函数之前添加超时，结果成功了！我将测试延迟（）太好了。谢谢！！这个问题以前没有得到回答。不幸的是，delay（）不是一个合适的方法，因为它重新创建了动画队列构建问题，我正在使用clearTimeOut来解决这个问题。将timeOut放在if（）之前但似乎没有缺陷。我编辑了您的答案以反映这一点。请随意重新修改！再次感谢！！我想到了这一点，但这是昂贵的，因为您需要取消注册/注册事件处理程序，而不是添加/删除类。这也行得通！我没有足够的经验来说明这是否是一个更好的方法，但谢谢！利用display的巧妙技巧：none…@Asad-我明白了。（我不熟悉内部结构，所以我相信你的话。）另一个论点是，如果我们想在某个时候恢复
#hitbox
，我们必须重新注册事件，因此你的答案显然会更高。