2

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

#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

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

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

4

2 回答 2

2

您可以向 中添加一个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
于 2012-12-19T23:55:08.663 回答
1

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

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

有了这个：

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

编辑：

这是一个jsFiddle。

(To make this quick-and-dirty demo work, I added squares, added your code inside the ready handler, removed the easeOut parameters, and changed the direction of animation.)

于 2012-12-20T00:04:45.640 回答