タブの切り替え時にふわっと表示させたい。

Question

実現したいこと

タブの切り替え時にふわっと表示させたい。
jQueryでfadeIn(300)を使い切り替えたいが、ふわっと切り替えられない。

該当のソースコード

 <nav class="news__tab" aria-label="お知らせメニュー">
                    <ol>
                        <li class="active"><a>営業情報</a></li>
                        <li><a>その他</a></li>

                    </ol>
                </nav><!-- /.news__tab -->

                <div class="news__area">
                    <ul class="grid grid-pd2col news-card__list show">
                        <li class="news-card__item">
                            <a href="#" class="news-card__link">
                                <div class="news-card__body">
                                    <time>2020.12.24</time>
                                    <p class="news-card__txt">年末最後の営業日は27日になります。</p><!-- /.news-card__txt -->
                                </div><!-- /.news-card__body -->
                                <figure class="news-card__thumb"><img src="img/news01.jpg" alt=""></figure>
                                <!-- /.news-card__thumb -->
                            </a><!-- /.news-card__link -->
                        </li><!-- /.news-card__item -->
                
                    </ul><!-- /.grid grid-pd3colnews-card-list -->


                    <ul class="grid grid-pd2col news-card__list">
                        <li class="news-card__item">
                            <a href="#" class="news-card__link">
                                <div class="news-card__body">
                                    <time>2023.3.24</time>
                                    <p class="news-card__txt">ホームページをリニューアルしました。</p><!-- /.news-card__txt -->
                                </div><!-- /.news-card__body -->
                                <figure class="news-card__thumb"><img src="img/news01.jpg" alt=""></figure>
                                <!-- /.news-card__thumb -->
                            </a><!-- /.news-card__link -->
                        </li><!-- /.news-card__item -->
                    
                    </ul><!-- /.grid grid-pd3colnews-card-list -->
                </div><!-- /.news__aria -->

.news__nav {
    margin-top: 46px;
    text-align: center;

    ol {
        display: flex;
        justify-content: center;

        li {
            font-size: 16px;


            &:first-child {
                margin-right: 53px;
            }

            a:hover,
            a:focus {
                color: #978F10;
            }



        }
    }

}

.grid {
    display: grid;
    gap: 20px 46px;
}

//カード
.news-card__item {
    background: #F6F6F6;
    padding: 15px 30px 10px 15px;
    transition: 0.3s;
}

.news-card__link {
    display: flex;
    flex-direction: row-reverse;
    justify-content: start;
    align-items: flex-start;
}

.news-card__body {
    margin-left: 30px;

    time {
        font-size: 14px;
        line-height: 2.2;
    }
}

.news-card__txt {

    font-size: 16px;
    line-height: 2;

    .blank {
        display: none;
    }
}

.news-card__thumb {

    img {
        width: 103px;
        height: 100px;
        aspect-ratio: 1 / 1;
    }
}

@include medium {
    .news__inner {
        padding: 60px 25px;
    }

    .grid-pd2col {
        display: grid;
        gap: 20px;
        grid-template-columns: repeat(2, 1fr);
        max-width: 1186px;
        margin: 50px auto 0;
    }



}

@include large {
    .grid-pd2col {
        gap: 20px 46px;
    }


}

@include x-large {
    .news-card__txt {
        .blank {
            display: block;
        }
    }
}

//ニュースタブ
.active {
    text-decoration: underline;
}

.news__area .show {
    display: grid;
}

.news__area ul:not(.show) {
    display: none;
}

//ニュース タブ
//--------------------------------------------
$(function () {

    // ①タブをクリックしたら発動
    $('.news__tab li').click(function () {

        // ②クリックされたタブの順番を変数に格納
        var index = $('.news__tab li').index(this);

        // ③クリック済みタブのデザインを設定したcssのクラスを一旦削除
        $('.news__tab li').removeClass('active');

        // ④クリックされたタブにクリック済みデザインを適用する
        $(this).addClass('active');

        // ⑤コンテンツを一旦非表示にし、クリックされた順番のコンテンツのみを表示
        $('.news__area ul').removeClass('show').fadeOut(300).eq(index).addClass('show').fadeIn(300);

    });
});

試したこと

ネットで調べて、fadeIn,fadeOutなど指定しましたがうまく行きません。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[m.ts10806]

「うまくいかない」という表現は他者に何も伝えない表現で逆質問を引き出すだけなので避けたほうが良いです。
何を調べて、何を考えて、何を試して、何が起きてるのか
を具体的に記載してください

Answer 1

クラスのつけ外しはいるのでしょうか？

$('.news__area ul').fadeOut(300).eq(index).fadeIn(300);

参考

<style>
.hoge.active{
color:red;
}
.fuga{
position:absolute;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(function(){
  $('.hoge:eq(0)').addClass('active');
      $('.fuga:gt(0)').hide();
  $('.hoge').on('click',function(){
    var index=$('.hoge').index(this);
    $('.hoge').removeClass('active');
    $(this).addClass('active');
    $('.fuga').fadeOut(300).eq(index).fadeIn(300);
  });
});
</script>
<div class="hoge">hoge1</div>
<div class="hoge">hoge2</div>
<div class="hoge">hoge3</div>
<div class="fuga">fuga1</div>
<div class="fuga">fuga2</div>
<div class="fuga">fuga3</div>

Comments

[spn]

わかりやすいコメントありがとうございます！

.news__area .show {
display: grid;
}

.news__area ul:not(.show) {
display: none;
}
で指定しているので、showクラスをつけたり消したり、かつfadeIn,Outを指定したいです。

[yambejp]

fadeInするなら.showしてからフェード処理、fadeOutするならフェード処理してから.showを外す

[spn]

ありがとうございました！解決しました。

Answer 2

$('.news__area ul').removeClass('show')の時点で、

.news__area ul:not(.show) {
    display: none;
}

が有効になって非表示になります。
fadeOut()が最終的にdisplay: none;を付加しますの上記のCSSは不要です。

removeClass と addClass が不要ですね。

$('.news__area ul').fadeOut(300).eq(index).fadeIn(300);

これでふわっと消えて、ふわっと表示されます。ただし、表示位置がずれるので、position:absolute;で位置を固定する必要があります。

.news__area ul {
  position: absolute;
}

---

コメントの内容を考慮したサンプルをCodePenで作成しましたので参考にしてください。

CSS jQuery TabPage FadOut/FadeIn Sample

修正内容
html
news-card__list__wrapperというdivタグでulを囲む
表示したいnews-card__list__wrapperにshowを追加

CSS
下記のコードを追加

.news__area .news-card__list {
    display: grid;
}
.news__area .news-card__list__wrapper:not(.show) {
    display: none;
}
.news__area .news-card__list__wrapper {
  position: absolute;
}

Comments

[spn]

コメントありがとうございます。ふわっと表示されるようになりました。しかしタブの切り替え時、営業情報はレイアウト崩れがないのに、その他のみdisplay blockとなり、表示位置がずれます。display gridで指定しているんですがこれはfadeIn,Outの特徴なのでしょうか。absoluteを使わずに表示できませんか。

[spn]

.news__area .show {
display: grid;
}

.news__area ul:not(.show) {
display: none;
}
で指定しているので、showクラスをつけたり消したり、かつfadeIn,Outを指定したいです。

[hatena19]

fadeIn は要素にインラインで display: block を追加しますので、それでgridが無効になるのが原因でしょう。

HTMLでul要素を囲むタグを追加して、それに対してfadeIn, fadeOutするようにすればどうでしょう。

[spn]

showクラスを消しnews-card__list__wrapperというdivタグでulを囲みました。$('.news-card__list__wrapper').fadeOut(300).eq(index).fadeIn(300);で指定して切り替えはうまくいったのですが、
最初の画面で、どちらも表示されてしまいます。

[spn]

ありがとうございました。解決いたしました。