ある要素をクリックし、別の要素を表示させる処理を実装しているときに、おしゃれに表示させたいと思い、fadeIn()を使うことを考えましたが、addClass()と一緒に使う方法に詰まりました。

ここでは備忘録も兼ねてその方法を残しておきたいと思います。

addClass()とfadeIn()を一緒に使う方法

まずはHTMLです。尚、jQueryはCDNを使用しております。

index.html

    <div class="js-click-one">1</div>
    <div class="js-two invisible">2</div>

次にCSS。

style.css

.invisible{
    display: none;
}

仕組みとしては、1をクリックするとCSSのinvisibleクラスがjs-click-oneに付与され表示されなくなり、js-twoのinvisibleクラスをとり、fadeInで表示させることをイメージしています。

そして、そのイメージをコード化したのが下記です。

app.js

$(function (){
    $('.js-click-one').on('click', function (){
        $('.js-click-one').hide().addClass('invisible');
        $('.js-two').fadeIn(3000, function (){
            $(this).removeClass('invisible');
        })
    })
})

こうすれば、addClass()とfadeIn()を同時に使えます。
ぜひご参考に。