javascript – 带有动画的Mouseenter和mouseleave

我做了一个简单的鼠标输入和鼠标离开动画.当你鼠标输入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);
});

解决方法:

使用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); }
);

标签：slidedown,slideup,javascript,jquery,mouseenter
来源： https://codeday.me/bug/20190726/1538953.html