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

Question

这里我有一个简单的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 transitions（对于支持它们的浏览器）并让旧版浏览器具有非动画过渡。

使用相关的css对您的fiddle is here进行有效的CSS3编辑：

.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;
}