jQueryのエフェクト操作

以下のページでjQueryやDOMについて学んでいます。 www.mojage.club

本記事は、jQueryのエフェクト操作について纏めています。

Sponsored Link

jQueryのエフェクト操作

全てのjQueryエフェクトメソッドを無効化

これですべてのアニメーションが無効化されます。有効化する場合はfalseを代入しましょう。

jQuery.fx.off = true;

stop()アニメーションメソッド

stop()メソッドを使用することで、起動前に現在のアニメーションを停止することができます。

<div style="height:100px; width:100px; background-color:red; position:absolute;
left:20px;">
Hover over Me!
</div>

~~~

(function($) {
  $('div').hover(
    function() {
      $(this).stop().animate({left: 75}, 'fast');
    },
    function() {
      $(this).stop().animate({left: 20}, 'fast');
    }
  );
})(jQuery);

:animatedフィルタ

:animatedを使用することでアニメーションエフェクトが指定されている要素をフィルタできます。

(function($) {
  function recursiveAnimate(){
    $('div').slideToggle('slow',recursiveAnimate);
  };

  recursiveAnimate();
  
  $('div:animated').text('I am animating');

})(jQuery);

アニメーションのスキップ

show(), hide(), toggle()はパラメータを与えないことで、アニメーションしないで動作させることが出来ます。

(function($) {

  // アニメーションする
  $('div:first').click(function(){$(this).hide(1000)});

  // アニメーションしない
  $('div:last').click(function(){$(this).hide()});

})(jQuery);

Reference from : jQuery Enlightenment