向自定义 JQuery 动画添加回调功能的真正方法是什么？

Question

我在 stackoverflow 问题中发现了震动效果（此处 ）
代码如下；

jQuery.fn.shake = function(intShakes, intDistance, intDuration) {
    this.each(function() {
        $(this).css("position","relative"); 
        for (var x=1; x<=intShakes; x++) {
        $(this).animate({left:(intDistance*-1)}, (((intDuration/intShakes)/4)))
    .animate({left:intDistance}, ((intDuration/intShakes)/2))
    .animate({left:0}, (((intDuration/intShakes)/4)));
    }
  });
return this;
};

但我需要一种方法来添加回调函数（或任何其他简单的方法），以在效果之前改变摇动元素的边框颜色，并在动画完成后切换到原始颜色。
我尝试如下但没有机会（边框正在转动）立即原始颜色）

jQuery.fn.shake = function(intShakes, intDistance, intDuration,callback) {
    this.each(function() {
        $(this).css("position","relative"); 
        for (var x=1; x<=intShakes; x++) {
        $(this).animate({left:(intDistance*-1)}, (((intDuration/intShakes)/4)))
    .animate({left:intDistance}, ((intDuration/intShakes)/2))
    .animate({left:0}, (((intDuration/intShakes)/4)));
    }
  });
if(callback) callback();
return this;
};

并像这样调用

$elem.css('borderColor','red');
$elem.shake(3,5,500,function(){
$elem.css('borderColor','#a6caf0');})

您可以在 这里找到 JSFiddle 示例。（如果您取消回调功能在小提琴中，您会看到边框正确变为红色，但回调失败。）
幸亏现在...

Answer 1

给你：

$.fn.shake = function ( times, distance, duration, callback ) {
    return this.css({ position: 'relative' }).each( function () {            
        for ( var i = 0, t = duration / times; i < times; i+= 1 ) {
            $( this ).
                animate({ left: -distance }, t / 3 ).
                animate({ left:  distance }, t / 3 ).
                animate({ left:         0 }, t / 4 );
        }

        $( this ).show( callback );
    });
};

然后...

$( button ).click( function () {
    $( field ).addClass( 'shaking' ).shake( 5, 10, 500, function () {
        $( this ).removeClass( 'shaking' );
    });
});

现场演示： http://jsfiddle.net /f96ff/8/

不需要计时器。您只需通过（中性）.show() 方法将callback 函数添加到效果队列即可。这可确保仅在所有动画（来自队列）完成后调用回调。

此外，我推荐一个用于“摇动”状态的 CSS 类：

.shaking { border-color: red; }

另外，请注意，我显着重构了 $.fn.shake 的代码。我建议您花几分钟时间来分析我如何改进代码。

Answer 2

你必须设置一个超时，你不能直接调用回调，因为jquery的animate函数是异步的。所以它会直接执行回调。可以做的就是为整个动画的时间设置一个超时。

您也不能只使用 jQuery 的 animate 函数的回调，因为您正在使用多个。

解决方案： http://jsfiddle.net/f96ff/2/