jquery - アニメーションの終了後にcssルールを適用するjquery

Question

jqueryを使用してcssproperty\ valueを追加できるようにしたいのですが、最初にアニメーションが作成されるまで待ってから、表示値をnoneに設定してcssにアニメーションを削除させたいと思います。

これは私のコードの抜粋です。

**Jquery**
 $(".filled-rectangle").animate(); 
 $(".filled-rectangle").css('display', 'none'); 

Answer 1

.promise()および .done() メソッドを使用して、現在のアニメーション キューの最後にアクションを追加できます。

$(".filled-rectangle").animate().promise().done(function() {
    $(".filled-rectangle").css('display', 'none');
});

これは、.promise() メソッドによって返される promise を返すことができるため、アニメーションが完了した後に呼び出されるコールバックを他のコードに追加できるようにする場合に非常に便利です。

または、 .queue()を使用してアニメーション キュー自体にコールバックを追加できます。

$(".filled-rectangle").animate().queue(function(next) {
    $(".filled-rectangle").css('display', 'none');
    next();
});