フェードアウトからフェードインを繋げて実行するサンプル

フェードアウトからフェードインを繋げて実行する方法はいくつかあると思いますが、JQueryであればdelay()をかませると楽ちん

【jQuery】animate()でフェードアウトとフェードインを繋げて動作させる方法 | ONE NOTE

html

<img id="sample1" src="https://repop.jp/blogger/img/slime1.png">

JQuery

//sample2を隠しておく

$('#sample2').hide();

//sample1をクリック

$('#sample1').click(function () {

//sample1を1秒間でフェードアウト

$('#sample1').fadeOut(1000);

//sample2を1秒後からフェードイン

$('#sample2').delay(1000).hide().fadeIn(1000);

});

.delay(待機時間)となっております

フェードアウト完了までの時間より多く設定しておけば要素幅が違ってもカクつくことないですね

動作サンプル

スライムが気になったらこちら

一覧