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

2019-03-032021-06-03jQuery アニメーション,jQuery

jQueryのanimate()を使ってフェードアウトとフェードインを繋げてスムーズに動作させる方法です。

カクツキや位置ずれにならない用にanimate()を設定します。

animate()を使ってフェードアウト・フェードインを実装する方法

実装サンプル

See the Pen OqNYWm by yochans (@yochans) on CodePen.

サンプルコード

HTML

<div id="one"></div>
<div id="two"></div>

CSS

#one{
  width:300px;
  height:180px;
  background: #008080;
  background-size: 40px;
  color:#FFF;
  padding:10px;
  font-size:30px;
}

#two{
  width:300px;
  height:180px;
  background: #1e90ff;
  background-size: 40px;
  color:#FFF;
  padding:10px;
  font-size:30px;
  display:none;
  opacity:0;
}

jQuery

$('#one').click(function() {
  $('#one').animate({opacity: 0}, 500,function(){
	$('#one').css('display','none');
	$('#two').css('display','block');
	$('#two').animate({opacity: 1}, 500);  
  });
});

コード説明

フェードイン時の位置ずれやカクツキをなくす為にdisplay:none;も設定します。

opacityでのフェードアウト後の要素にもフェードアウト後にdisplay:none;を記述します。

フェードインする要素にはフェードイン直前でdisplay:none;を解除します（サンプルではblock）。

また上の動作サンプルではスムーズに連続したフェードアウト・フェードインを実装するのに、逆にしたスクリプトも記述しています。

animate()の記述と動作

animate()は設定した時間を使って指定したCSSプロパティを変更します。

第4因数パラメータにてアニメーション完了後に実行する関数を設定する事が可能です。

※サンプルではEasingを指定していないので第3因数になっています。

$(target).animate(properties,Duration,Easing,Complete);