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

您可以向clicked添加#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

Answer 2

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

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

用这个：

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

修改

Here's a jsFiddle.

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

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

2 个答案: