ある要素をfadeOutさせた後、他の要素をfadeInさせたいが先にfadeInした要素が表示されてしまう

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>test</title>
        <link rel="stylesheet" href="css/test_01.css">
    </head>
    <body>
        <ul class="btn">
            <li><a href="" data-val="ci">〇</a></li>
            <li><a href="" data-val = "tr">△</a></li>
            <li><a href="" data-val="sq">□</a></li>
        </ul>

        <ul class="items">
            <li class="ci"><div class="box circle"></div></li>
            <li class="ci"><div class="box circle"></div></li>
            <li class="sq"><div class="box square"></div></li>
            <li class="tr"><div class="triangle"></div></li>
            <li class="tr"><div class="triangle"></div></li>
        </ul>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script src="js/test_01.js"></script>
    </body>
</html>

css部分　css/test01.css

ul{
    padding:0;
    display:flex;
    list-style: none;
}

ul.btn{
    justify-content: center;
}

ul.btn li{
    width:48px;
    text-align: center;
    margin-right:24px;
}

ul.btn li:last-child{
    margin-right:0;
}

ul.btn a{
    display:block;
    width:100%;
    text-decoration: none;
    color:#fff;
    background: dimgray;
    border-radius:8px;

}

ul.items{
    justify-content: start;
    width:800px;
    margin:0 auto;
    margin-top:64px;
    
}

ul.items li{
    margin-right: 48px;
}

.box{
    width:50px;
    height:50px;
}

.triangle{
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 50px solid yellow;
  }

  .circle{
      border-radius: 50%;
      background:red;
  }

  .square{
      background:blue;
  }

js部分　test01.js

$(function(){
    $("ul.btn a").on("click",function(){

        let filter = $(this).attr("data-val");

        console.log(filter);

        $("ul.items li").each(function(){
            $(this).fadeOut(1000,function(){
                if($(this).hasClass(filter)){
                $(this).fadeIn(1000);
                }
            });
        });

        return false;
    })
})

現在jqueryを学習中です。
〇△□の図形が表示されていてそれに見合ったボタンを押下すると今まで表示された図形がfadeOut後、対象の図形が表示されるようにしたいのですが、ボタンを押下時に今まで表示されていた図形がfadeoutする前に対象の図形が表示されていまいます。
fadeoutとfadeinをhideとshowに書き換えるとこれまで表示されている要素が非表示になってから対象の要素が表示されるようになります、どちらもコールバック関数内で処理しているのですが記述方法が間違っているのでしょうか。
ご教授お願いします。

行動規範の内容に同意します

回答2件

ベストアンサー

javascript
1<script>
2$(function(){
3  $('#b').hide();
4  $('#btn').on('click',function(){
5    if($('#a').is(':hidden')){
6      $('#b').fadeOut(1000).queue(function(){
7        $('#a').fadeIn(1000);
8        $(this).dequeue();
9      });
10    }else{
11      $('#a').fadeOut(1000).queue(function(){
12        $('#b').fadeIn(1000);
13        $(this).dequeue();
14      });
15    }
16  });
17});
18</script>
19
20<input type="button" id="btn" value="btn">
21<div id="a">a</div>
22<div id="b">b</div>

投稿2021/07/16 05:16

yambejp

総合スコア115008

doradora2525

2021/07/18 09:51

ご回答ありがとうございます。 queueメソッドについて調べてみます。ご回答いただいたソースを見て気づきました。私の記述したコードでは、すでに非表示になっている要素に対してはslideOut(1000)処理が行われず非表示でボタン押下で一致した要素が1000ms待たずに表示されてしまうみたいでした。力技ですが $(function(){ $("ul.btn a").on("click",function(){ let filter = $(this).attr("data-val"); console.log(filter); $("ul.items li").each(function(){ $(this).fadeOut(1000,function(){ if($(this).is(":hidden")){ let elm = $(this); setTimeout(function(){ console.log("hide!!"); if(elm.hasClass(filter)){ elm.fadeIn(1000); } },1000) } }); }) return false; }) }) のようにしてみたら先にslideInが実行されずに動作しました。ご回答ありがとうございました。

doradora2525

2021/07/18 10:30

if($(this).is(":hidden"))の分岐は必要ないですね、それと要素が表示されている状態から再表示されるまでに3000msかかってしまいますので修正します。 $(function(){ $("ul.btn a").on("click",function(){ let filter = $(this).attr("data-val"); console.log(filter); $("ul.items li").each(function(){ $(this).fadeOut(1000); let elm = $(this); setTimeout(function(){ console.log("hide!!"); if(elm.hasClass(filter)){ elm.fadeIn(1000); } },1000) }); return false; }) }) とりえずこれで良しとします。ご教授ありがとうございました。

行動規範の内容に同意します

※現状調査の経過のみです。色々やってみて適宜追記していきます。

2回目以降はfadeInが先に動いてそこからfadeOut→fadeInになってたり、安定しないですね。
このHTMLなら規則性があるのでeachしなくでもhasClassなくても、↓のようなコードで同義ですが

js
1$(function(){
2	$(document).on('click', 'ul.btn a', function(e) {
3		e.preventDefault();
4
5         let filter = $(e.currentTarget).attr("data-val");
6
7         $("ul.items li").fadeOut(1000,function() {
8			$("."+filter).fadeIn(1000);
9        });
10    })
11})

これでも動きは同じ。
イベントの発生自体を見直した方がいいような気もしますが、こちらでも引き続き調整してみます。

投稿2021/07/15 21:20

m.ts10806

総合スコア80859

doradora2525

2021/07/18 08:16

確かにeachで回す必要はないですよね。ご回答ありがとうございます。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

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

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

ある要素をfadeOutさせた後、他の要素をfadeInさせたいが先にfadeInした要素が表示されてしまう

関連した質問