質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

91.24%

  • JavaScript

    11824questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

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

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 98

matsuzakaq

score 160

■ざっくり

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

■くわしく

➀「#label」をクリックする。

➁「a」が5秒かけて表示して消える。
【.fadeIn(1000).delay(2000).fadeOut(2000)】の部分

➂「b」が5秒後に表示される。
【.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>


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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+3

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/12/31 23:16

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

    キャンセル

  • 2017/12/31 23:21

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

    teratailはいいサイトです。

    キャンセル

  • 2018/01/01 06:48

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

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

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

    キャンセル

+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回目のクリックイベントでクリックイベントを削除するか、アニメーションが終わっていなければ再実行されないように制御してください。

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/01/01 06:46

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

    キャンセル

0

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

ただいまの回答率

91.24%

関連した質問

同じタグがついた質問を見る

  • JavaScript

    11824questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。