ある要素を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

総合スコア116724

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})