jQueryシングルクリック複数のアクション

Question

複数のエフェクトを実現するためにjQueryを使いたいと思います。ユーザーが要素をクリックすると、そのクリックハンドラ内で一連の関数が呼び出されます。関数内で実行されている各アクションの間に遅延を持つ方法がjQueryにありますか？

例は次のようになります

$(function() { 
    $('.activator').on('click', function() { 
     $(this).toggleClass('animated'); 
     $('.app').css('background',$(this).css('background')); 
    }); 
}) 

付活剤元素は、それがクラスから受信アニメーションを実行し、アプリケーションがバックグラウンドを受信有し、それら両方が同時に発生し、代わりにアニメーションができ」 tも見られる。どのようにして、2つの間、または複数の間に遅延を設定できますか？

ありがとうございます！

Answer 1

アクションを遅らせるためのJavaScript組み込み関数setTimeout()があります。

Answer 2

あなたがそうのように、機能を遅らせるために、.delay()機能を使用することができます。

$(function() { 
    $('.activator').on('click', function() { 
    $(this).toggleClass('animated').delay(400); // delay 400ms = 0.4s, change to any thing 
    $('.app').css('background',$(this).css('background')); 
    }); 
}) 

あなたはそれの呼び出し後に延期したい任意の関数の隣に追加することができますので、上記のコードは、最初に実行されます400msの間遅延させてから、2行目を実行します。

Answer 3

それはCSSアニメーションだなら、あなたはそれはあなたが使用するjQueryのアニメーションである場合animationend/transitionend

$('.activator').on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){ 
    $('.app').css('background',$(this).css('background')); 
}); 
$('.activator').on('click', function() { 
    $(this).toggleClass('animated'); 
}); 

デモ

$('.activator').on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() { 
 
    $('.app').css('background', $(this).css('background')); 
 
}); 
 
$('.activator').on('click', function() { 
 
    $(this).toggleClass('animated'); 
 
});

.activator { 
 
    transition: all 1s; 
 
    width: 200px; 
 
    height: 50px; 
 
    background: red; 
 
} 
 
.activator.animated { 
 
    height: 500px; 
 
} 
 
.app { 
 
    width: 32px; 
 
    height: 32px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="app"></div> 
 
<div class="activator">Click me</div>

のためのイベントを設定する必要がありますcompleteのようなコールバックオプションの1つ、または次のようなコールバック関数を渡します。最後の引数。

jQuery("div").animate({width:"500"},{ 
    complete:function(){ 
     $('.app').css('background', $(this).css('background')); 
    } 
}); 
//Or 
jQuery("div").animate({width:"500"},function(){ 
    $('.app').css('background', $(this).css('background')); 
}); 

Answer 4

アニメーションの前に.delay（）を試したことがありますか？

$(this).delay(500).toggleClass('animated');