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/