カスタムJQueryアニメーションにコールバック機能を追加する真の方法は何ですか?

私は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の例は、こちらでご覧になれます(フィドルでコールバック関数をキャンセルすると、境界線は正しく赤になりますが、コールバックは失敗します)。
タクスは今...

0
jsFiddleの "Tidy up"ボタンをチェックしてください...
追加された 著者 Šime Vidas,
@JaredFarrish上のツールバーのjsFiddleでは、ボタンの上にあります。
追加された 著者 Šime Vidas,
@Alperあなたは私を冗談していますか?あなたのデモのインデントが壊れています...
追加された 著者 Šime Vidas,
@Alper他の質問(その jquery.effects.shake.js スクリプト)で受け入れられた答えによって提案された解決策を試しましたか?
追加された 著者 Šime Vidas,
@ŠimeVidas - どこ?私はそれについて聞いたことがない。
追加された 著者 Jared Farrish,
@ŠimeVidas - 聖なる牛、それは最高です。私は実際に(彼は)ファイヤーバグを見ていました。私は、どこだったか???
追加された 著者 Jared Farrish,
@Alpert - 実際にはない: jsfiddle.net/f96ff/1
追加された 著者 Jared Farrish,
@ŠimeVidas - 私はしましたが、コードはすでにきれいに見えます。
追加された 著者 Alper,
私は冗談ではありません)、私はまだきれいにインデントされたコードブロックを参照してください、何度もTidyを押した後でも、私は更新しました。今はどうですか?
追加された 著者 Alper,
@ŠimeVidas - 私は自分のプロジェクトに新しいファイルを含めたくないので試しませんでした。このコードスニペットはうまくいきます。そして私はこれが学習の方法の一つだと思っています;)
追加された 著者 Alper,

2 答え

どうぞ:

$.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' );
    });
});

Live demo: http://jsfiddle.net/f96ff/8/

タイマーは必要ありません。 (中立) .show()メソッドを使用して、コールバック関数をエフェクトキューに追加するだけです。これにより、すべてのアニメーション(キューからの)が終了した後にコールバック後にのみ呼び出されることが保証されます。

さらに、私は "振る"状態のCSSクラスを推奨します:

.shaking { border-color: red; }

また、 $。fn.shake のコードを大幅にリファクタリングしていることにも注意してください。どのようにコードを改善したかを分析するために、数分かかることをお勧めします。

3
追加された
@alper - あなたが受け入れた答えをアップアップしなかったのは、私が本質的に timeout メソッドを受け入れなかったからです。私はあなたがこの答えを見ることを望みます。
追加された 著者 Jared Farrish,
うわー、それはかなり深いで学ぶことを試みる前に私が言及したように、かなり見える..あなたの純粋な(完璧な)JQueryソリューションをありがとう。
追加された 著者 Alper,

タイムアウトを設定する必要があります。jqueryのアニメーション機能が非同期であるため、コールバックを直接呼び出すことはできません。コールバックを直接実行します。何ができるのかは、アニメーション全体のタイムアウトに設定されます。

複数を使用しているため、jQueryのアニメーション機能のコールバックを使用することもできません。

Solution: http://jsfiddle.net/f96ff/2/

1
追加された
ありがとう..完璧に..
追加された 著者 Alper,
ŠimeVidasは、純粋なJQueryを使ってより良い方法で資金を調達していますが、迅速で実用的な答えに感謝しています。
追加された 著者 Alper,