javascript - Mouseenter 和 mouseleave 动画

Question

我制作了一个简单的鼠标进入和鼠标离开动画。当你鼠标进入div。比链接 div 要打开。当您将鼠标移开时，div 将关闭。我用 slideUp 和 slideDown 设置了一个动画。

我对动画有疑问。页面上有很多.comment div。当我快速将鼠标悬停在项目上时。幻灯片动画快疯了，你会看到很多次动画。我该如何解决？谢谢!

$("#comments .comment .links").hide();
$("#comments .comment").mouseenter(function() {
    $(".links",this).slideDown(300);
}).mouseleave(function() {
    $(".links",this).slideUp(300);
});

Answer 1

使用stop(true) 清除每个事件的动画队列:

$("#comments .comment .links").hide();
$("#comments .comment").mouseenter(function() {
    $(".links",this).stop(true).slideDown(300);
}).mouseleave(function() {
    $(".links",this).stop(true).slideUp(300);
});

此外，您可以使用 hover() 来压缩此代码:

$("#comments .comment .links").hide();
$("#comments .comment").hover(
    function() { $(".links", this).stop(true).slideDown(300); },
    function() { $(".links", this).stop(true).slideUp(300); }
);