jQuery动画完全反转

【问题标题】：jQuery animation complete reversejQuery动画完全反转
【发布时间】：2011-11-01 22:19:37
【问题描述】：

我使用 jQuery 将一个元素向左移动，我想将其动画快速返回到原始位置以从头开始动画。我的代码如下所示：

#animation-element {
    position: relative;
}

$('#animation-element').animate({ left: '500px' }, 5000, 'linear', function() {
    // ???
});

它向右移动 500 像素，最后它应该快速（2000 毫秒）回到 0 像素（左）并再次开始动画（向右 500 像素）。应该是不定式动画。

【问题讨论】：

标签： jquery jquery-animate

【解决方案1】：

下面的 jQuery 扩展方法可以满足您的需要，另外还有一点可配置性。

$.fn.inout = function(w, d1, d2, ease) {
    var that = this;
    $(that).animate({left: w}, d1, ease, function() {
        $(that).animate({left: 0}, d2, ease, function() {
            $(that).inout(w, d1,d2, ease);
        });
    });
};

$('#animation-element').inout(500, 5000, 2000, 'linear');

【讨论】：