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

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

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

JQuery
//sample2を隠しておく
$('#sample2').hide();

//sample1をクリック
$('#sample1').click(function () {
//sample1を1秒間でフェードアウト
$('#sample1').fadeOut(1000);
//sample2を1秒後からフェードイン
$('#sample2').delay(1000).hide().fadeIn(1000);
});

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

動作サンプル

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


  • このエントリーをはてなブックマークに追加

0 件のコメント :