１つのクリックで２つの要素を、別のタイミングでアクションしたいときは？

Question

###■ざっくり
「#label」をクリックしたら、「a」と「b」を別のタイミングで表示したいです。しかし正しい記述がわかりません。

###■くわしく
➀「#label」をクリックする。
↓
➁「a」が５秒かけて表示して消える。
【.fadeIn(1000).delay(2000).fadeOut(2000)】の部分
↓
➂「b」が５秒後に表示される。
【.delay(5000).fadeIn(1000);】の部分

###■コード
今はこのようになっていて、「a」と「b」が同時に表示されてしまいます。「b」はちょっと後にしたいのですが。。

<!-- a -->
<script>		
(function($) {
    $('#label').on('click', function() {
        $('.a').fadeIn(1000).delay(2000).fadeOut(2000);
    });
})(jQuery);
</script>

<!-- b -->
<script>	
(function($) {
    $('#label').on('click', function() {	
	    $('.b').delay(5000).fadeIn(1000);
	});
})(jQuery);
</script>

こういう感じで入れ子にしたいのです。でも、こういう感じでいくら試してもうまく目的通りにいきません。

<script>		
(function($) {
    $('#label1').on('click', function() {
        $(('.a').fadeIn(1000).delay(2000).fadeOut(2000),	
		$('.b').delay(5000).fadeIn(1000));
    });
})(jQuery);
</script>

お詳しい方、宜しくお願い致します。

Answer 1

moredeep様同様、こちらの環境でも以下のコードで確認できました。

(function($){
  $('#label').on("click",function(){
    $('.a').fadeIn(1000).delay(2000).fadeOut(2000);
    $('.b').delay(5000).fadeIn(1000);
  });
})(jQuery);

jsfiddle

また、イベント実行を一度だけにしたい場合は.one()を使うといいですよ。.one()で設定されたイベントは一度実行されると解除されます。

イベントに設定した関数内でまたイベントを設定すれば、処理が終わった後にまたクリックイベントを有効にする、ということができ、一度に複数実行される、ということがなくなります。

以下そのように実装した場合のコードです。

またこのコードでは.bの.delay()を消させていただきました。このように.aの.fadeOut()のフィードバックとして.bのアニメーションを設定すれば、わざわざ.delay()を書く必要がなくなります。

function ctrlAB($){
  $('.a,.b').css("display","none");
  $('.a')
  .fadeIn(1000)
  .delay(2000)
  .fadeOut(2000,function(){
    $('.b').fadeIn(1000);
    $('#label').one("click",ctrlAB.bind(undefined,$));
  });
}

(function($){
  $('#label').one("click",ctrlAB.bind(undefined,$));
})(jQuery);

jsfiddle

Comments

[moredeep]

.one()便利ですね。いいものを教えてもらいました。

[namnium1125]

私もteratailで教えてもらいました。(^ ^;

teratailはいいサイトです。

[退会済みユーザー]

できました！助かりました！！どうもありがとうございます。

>この関数内でまたイベントを設定すれば、処理が終わった後にまたクリックイベントを有効にする、ということができ、一度に複数実行される、ということがなくなります。

へぇ~！ありがとうございます。こちらもあわせて覚えておきます。

Answer 2

試してみましたが、以下で動作しました。(chrome,IE11で確認)

$(function(){
    $('#label').on('click', function() {
        $('.a').fadeIn(1000).delay(2000).fadeOut(2000);
        $('.b').delay(5000).fadeIn(1000);
    });
});

「「a」と「b」が同時に表示されてしまいます。」とありますが、もしかして、
一度「a」がfadeIn→fadeOutし、「a」が再度fadeIn→fadeOutするとともに「b」が表示される、という意味だったりしますか？
だとしたらクリックイベントが2回発生し、アニメーションがキューに登録されてしまっていているせいです。
1回目のクリックイベントでクリックイベントを削除するか、アニメーションが終わっていなければ再実行されないように制御してください。

蛇足：質問するとき、動作環境を記載すると、回答者は検証しやすいので回答も集まりやすいです。

Comments

[退会済みユーザー]

なるほどなるほど。コピペだけでなんとかしようとしてるとダメですね。仕組みや質問時の方針など、教えて頂きありがとうございます。

Answer 3

未検証ですがsetTimeoutは試されました？

(function($) {
    $('#label1').on('click', function() {
        $(('.a').fadeIn(1000).delay(2000).fadeOut(2000);
        setTimeout(function({
            $('.b').delay(5000).fadeIn(1000));
        }), 5000); 
    });
})(jQuery);