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

2019年4月13日jQuery

jQueryの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);

Properties変化させるCSSプロパティを指定
Duration実行時間
Easingイージングの種類
Complete終了後の動作

2019年4月13日jQuery

Posted by ヨウスケ