jQuery – 向左滑动元素并更改其样式

在这里，我有一个简单的div，里面有图像和文字。 此外，我有一个链接.remove ，我想动画它向左滑动并更改它的背景，文本等。

到目前为止，我已经做到了这一点。 但是有一个小虫子（当你快速盘旋几次时检查它）。

 $(document).ready(function () { $('.remove').hover(function () { $(this).animate({ width: '85px' }); }, function () { $(this).animate({ width: '11px' }) }); }); 

这是一个演示 – http://jsfiddle.net/9jQtt/

这就是我想要实现的目标：

Answer 1

问题是如果你快速进出，动画就会叠加起来。 您需要通过调用.stop()取消上一个动画：

 $(document).ready(function(){ $('.remove').hover(function(e){ $(this).stop().animate({width: '85px'}); }, function(e){ $(this).stop().animate({width: '11px'}) }); }); 

示例： http ： //jsfiddle.net/9jQtt/1/

Answer 2

当使用jQuery的.animate（）函数时，它是由mouseEnter或hover事件触发的。 处理此问题的标准方法是使用.stop（）函数，如：

 $(this).stop().animate({ width: "85px" }); 

但你可能想尝试一些不同的东西，这里有解释： http ： //css-tricks.com/examples/jQueryStop/

实际上，使用stop（）会停止动画而不会完成。 根据您的情况或您的需要，您可以让动画完成并禁用排队。 它在上面的链接中解释。

Answer 3

虽然我爱我一些jQuery，你应该考虑使用CSS3过渡 （对于支持它们的浏览器）并让旧版浏览器具有非动画过渡。

你的小提琴的工作，CSS3编辑在这里 ，与相关的CSS：

 .author .remove:hover { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; width:80px; }