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