1

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

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

如果鼠标保持不动，带有最新 Chrome on Mac 标题的 PS 不会向下滑动。Whit 最新的 Firefox 标题只是 op 和 down 直到鼠标悬停图像。

4

1 回答 1

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);
        }
    );
});
于 2011-12-03T22:27:22.133 回答