jquery - end（）はanimate（）に対してどのように機能しますか？

Question

現在、jqueryコードをチェーンすることを検討しています。要素は、アニメーション化された境界線を捨てる必要があります。私の解決策：borderWidthをゼロにアニメーション化してから、クラスを削除します。

$(".imgWrap", element).animate({ borderWidth: "0px" }).end()
    .removeClass("border");

animate（）はラップされた要素を返すことになっていますが、jQuery APIから理解できることはend()、を呼び出す前の状態にオブジェクトを返します.find。

.findは例のコンテキストにあるので、自由に置き換えて.animateください。残念ながら、これは私にはうまくいきません。の結果.end()はの結果です.animate()。

score 1 · Accepted Answer

あなたは（今）findフィルター（または他のフィルター）をend持っていないので、元に戻すものは何もありません。とは何の関係もありませんanimate。

最初にコンテナを選択してから、その中を探すimgWrap場合は、フィルタを元に戻すことができます。

$('.container').find('.imgWrap').animate({borderWidth: '0px'}).end();

上記は、によって元に戻されるため、に一致する要素を$('.container')返しfindますend

紛らわしいのは、のremoveClass直後にanimateチェーンを作成すると、終了removeClassを待たanimateずにアニメーションが発生していないように見えることです。complete次の関数でクラスを削除する必要がありますanimate：

$(".imgWrap", element).animate({ borderWidth: "0px" }, function(){
    $(this).removeClass('border');
});

score 1 · Accepted Answer

.end()jQueryオブジェクトを以前の状態に戻します.find()

つまり、私がこれを行う場合：

$('div').find('.class').end()

次に、連鎖後に残っているのは。の結果です$('div')。要素自体については何も変更されません。

ほとんどのjQueryメソッドによって返されるjQueryオブジェクトには、現在一致する要素が含まれているだけでなく、以前の連鎖呼び出しからの結果のスタックも含まれています。

したがって、呼び出すと.find()、前のリストは引き続きそのスタックに保存されます。呼び出す.end()と、スタックから最後のアイテムが削除されます。

実際の問題を修正するには（つまり、アニメーションの終了後にスタイルを変更するには）、その変更をcompleteコールバック関数パラメーターに追加する必要があり.animate()ます。

$(".imgWrap", element)
   .animate({ borderWidth: "0px" }, function() {
       $(this).removeClass("border");
   });

2 に答える 2