jQuery 悬停动画继续运行。 Stop() 变体无济于事答案

【问题标题】：jQuery hover animation keeps running. Stop() variations don't helpjQuery 悬停动画继续运行。 Stop() 变体无济于事
【发布时间】：2011-12-03 22:10:29
【问题描述】：

我对这段代码有奇怪的问题

    $('img').hover(function(){
        var $cap = $(this).parent().find('.cap');
        window.setTimeout(function(){$cap.stop(true,false).animate({bottom:164},500)},500);
    },function(){
        var $cap = $(this).parent().find('.cap');
        window.setTimeout(function(){$cap.stop(true,false).animate({bottom:0},500)},500);
    })

我不明白为什么效果会一直上下波动并且不会停止。我用各种参数尝试过stop()。和clearQueue()。但似乎没有任何帮助。

基本的想法是当鼠标悬停图像滑动标题。并一直停留到鼠标完全离开图像，然后向下滑动。

任何想法我做错了什么？

现场示例http://jsfiddle.net/zSAYZ/

附：如果鼠标保持静止，Mac 上最新的 Chrome 标题不会向下滑动。 Whit 最新的 Firefox 标题只是 op 和 down 直到鼠标悬停图像。

【问题讨论】：

我相信一旦标题上升，悬停就会丢失，并且调用第二个函数（ mouseleave ）

标签： jquery jquery-animate jquery-hover

【解决方案1】：

我认为这是因为当标题出现时，您不是将鼠标悬停在图像上，而是在标题上。所以标题下降，然后你悬停在图像上，所以标题上升，然后你悬停在标题（而不是图像）上，所以标题下降，等等......你明白了。

这样效果更好（当标题遇到鼠标时它会暂停，但否则会起作用）。你也许可以改进它。

http://jsfiddle.net/x5UAH/4/

$(document).ready(function () {
    $('.contain').hover(
        function(){
            $(this).find('.cap').stop(true,false).animate({bottom:164},500);
        },
        function(){
             $(this).find('.cap').stop(true,false).animate({bottom:0},500);
        }
    );
});

【讨论】：