javascript - 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 过渡（对于支持它们的浏览器）并让旧浏览器具有非动画过渡。

您的小提琴的有效 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;
}