Question

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

    $('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/

P.S。如果鼠标保持不动，最新的Chrome on Mac标题不会向下滑动。惠特最新的Firefox标题只是操作和向下，直到鼠标悬停图像。

Answer 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);
        }
    );
});

jQuery悬停动画一直在运行。停止（）变化没有帮助

1 个答案: