jquery - 用 jquery 显示和隐藏一个框

Question

我有一个绝对定位的新闻框。当用户将鼠标悬停在它上面时，我创建了一个脚本来为其底部值设置动画。就是这样。

(function(){
    var newsbox = $('div#news_div');

    newsbox.on('mouseover',function(){
        $(this).animate({'bottom':160},{duration:500});
        });
    newsbox.on('mouseleave',function(){
        $(this).delay(20000).animate({'bottom':55},{duration:500});
        });
    })();

所以当我一次又一次地将鼠标悬停在它上面时，它会表现出不寻常的行为。你能告诉我吗？

Answer 1

在开始下一个动画之前，使用stop()方法停止任何当前正在播放的动画。

(function(){
    var newsbox = $('div#news_div');

    newsbox.on('mouseover',function(){
    $(this).stop().animate({'bottom':160},{duration:500});
    });
    newsbox.on('mouseleave',function(){
    $(this).stop().delay(20000).animate({'bottom':55},{duration:500});
    });
})();

Answer 2

尝试在动画之前添加一个停止，如果您将鼠标快速悬停在链接上，这将阻止您触发动画事件

(function(){
    var newsbox = $('div#news_div');

    newsbox.on('mouseover',function(){
        $(this).stop().animate({'bottom':160},{duration:500});
        });
    newsbox.on('mouseleave',function(){
        $(this).delay(20000).stop().animate({'bottom':55},{duration:500});
        });
    })();