jquery - jquery中奇怪的滑动效果

Question

引用我的 previous question

我在搜索框上有滑动效果。我已经为同一页面中的两个面板实现了相同的效果。

现在的问题是，如果你能看到我的working demo ，当您将鼠标悬停在第一个和第二个图标上时，您可以看到滑动效果。

这个效果应该滑动一次，然后在一秒钟后平滑地关闭，这是完美的。

但是当你快速将鼠标悬停在两个图标上(一个接一个 2-3 次)并突然将光标移动到部分栏的空白区域然后向下移动时，你会看到奇怪的动画滑动。

为什么会出现这种效果？

这是SOF的示例代码

$('.search').mouseenter(function(){
    $('.search > img').hide();
    $('.search > input').show();
    $(this).animate({'width' : "300px"});
});

Answer 1

您需要使用 .stop() 它会告诉 jquery 停止所有其他动画，直到这个动画完成。 jquery stop