jqueryアニメーションまとめ

基本アニメーション

show()/直接表示要素、アニメーションなし

show(speed,[callback])/アニメーションあり、コールバック関数あり

hide()/直接非表示要素、アニメーションなし

hide(speed,[callback])/アニメーション、コールバック関数

toggle()/可視状態を切り替える

toggle(speed,[callback])/アニメーション効果あり

toggle(switch)/switch

を表示するか非表示にするかを決定する
スライドアニメーション

slideDown(speed,[callback])/下に高さを増やしてコンテンツを表示し、アニメーション効果があります

slideUp(speed,[callback])/コンテンツを隠すために高さを上に下げ、アニメーション効果

があります.

slideToggle(speed,[callback])/高さを動的に変更し、

を動的に表示および非表示にする
フェードアウトアニメーション

fadeIn(speed,[callback])/フェードイン効果、アニメーション終了時にdisplayが変更されます 要素

fadeOut(speed,[callback])/フェードアウト効果、アニメーション終了時にdisplayが変更されます 要素

fadeTo(speed,opacity,[callback])/透明度効果を動的に変更し、displayプロパティ

に影響を与えない
カスタムアニメーション

animate(params, [duration], [easing], [callback])

属性値は、一般に数値であってもよいし、hide,show,toggleキーワード

であってもよい

属性値は配列形式であってもよく、第1の配列要素は属性の最終状態であり、第2の配列要素は緩動関数

である.

margin-leftは使用できませんが、アルパカ形marginLeft

を使用する必要があります.

は、emおよび%を使用することもできるし、+=または-=を使用して、要素を相対運動させることもできる

.

duration=0の場合、アニメーション

が直接完了します.

animate(params, options)

ほぼ同

easingとspecialEasingパラメータに注意する必要があります.前述paramsでも緩動関数を設定できますが、優先度

に注意してください.

queueパラメータは、現在のアニメーションがキューに参加するかどうかを決定し、デフォルト値はtrueであり、デフォルトキューfxに参加することを示す.falseの場合はキューに参加しません.文字列の場合は、カスタムキューの追加を表します.カスタムキューの追加後は自動的に実行されず、

を起動するためにdequeue(queueName)を自分で呼び出す必要があります.

stepパラメータは、アニメーションを実行する各ステップを表し、カスタムアニメーション

を実現するために使用することができる.

stop([queueName], [clearQueue], [gotoEnd])

clearQueue=trueの場合、アニメーションキュー

が空になります.

gotoEnd=trueの場合、現在のアニメーションがすぐに終了し、点滅現象が発生する可能性があります.

animate関数のまとめ:

要素呼び出しanimate複数のプロパティを設定し、複数のプロパティを表す同時にアニメーション

要素が複数回animateを呼び出すと、アニメーション効果は

に続きます.

複数の要素がそれぞれanimateを呼び出すと、複数の要素が同時に

アニメーション化されます.

は、コールバック関数を用いて、複数の要素の1つの次のアニメーション

を実現することができる.

以下では、コールバック関数

に依存することなく、複数の要素の次から次へとアニメーションをアニメーションキューを使用して実現する.

アニメーションキュー

queue([queueName])/イベントキュー

を表す配列を返します.

queue([queueName],[queueArray])/キューを置換し、空の配列であれば空のキューをクリアする目的

を達成することもできます.

queue([queueName],[callback])/キュー

に関数を追加

dequeue([queueName])/次の関数を返し、キューが空の

になるまでdequeue関数を直接または間接的に呼び出す必要があります.

clearQueue([queueName])/クリアキュー

delay(duration,[queueName])/キューに遅延を追加

アニメーションキューのまとめ:

show()を除去する.hide();toggle();これらのパラメータを持たない関数は、他のアニメーション関数がキューに

追加されます.

アニメーションキューはPromiseと少し似ていますが、やはり違います.Promise関数は呼び出すたびに戻り値がDeferredオブジェクトなので、チェーン呼び出しができます.アニメーションキューは、dequeue関数をループ呼び出して次の実行関数を実現します.

アニメーションキューとアニメーションキュー名は関連しており、デフォルト名はfxですが、呼び出しオブジェクトにも関連しています.

は任意の関数をキューに追加することができ、ajax、settimeoutなどの非同期関数であっても、そのコールバック関数にdequeue関数を呼び出して順次実行する目的を達成することができる.

アニメーショングローバルコントロール

jquery.fx.off=true; アニメーション効果がない場合は、すぐにアニメーション

を終了します.

jquery.fx.interval=13; アニメーション間隔は、デフォルト値は13で、値が小さいほど、アニメーション効果がスムーズになり、CPUリソースも消費されます.値が大きいほど、アニメーションの効果はスムーズではありません.

アニメーション中かどうかを判断
$this.is(":animated");
拡張animate関数
主に拡張$です.fx.Stepオブジェクト:

// jquery.path.js  ，         
jQuery.fx.step.path = function(fx) {
  var css = fx.end.css( 1 - fx.pos );
  if ( css.prevX != null ) {
    jQuery.cssHooks.transform.set( fx.elem, "rotate(" + Math.atan2(css.prevY - css.y, css.prevX - css.x) + ")" );
  }
  fx.elem.style.top = css.top;
  fx.elem.style.left = css.left;
};

// jQuery UI     
jQuery.fx.step[ hook ] = function( fx ) {
   if ( !fx.colorInit ) {
      fx.start = color( fx.elem, hook );
      fx.end = color( fx.end );
      fx.colorInit = true;
   }
   jQuery.cssHooks[ hook ].set( fx.elem, fx.start.transition( fx.end, fx.pos ) );
};

// animate      size      
jQuery.fx.step['size'] = function(fx)
{
   if ( !fx._sizeInit )
   {
      var \$el = \$(fx.elem),
          c = fx.end.center || {top: 0, left: 0};
 
      fx.start = \$el.offset();
      $.extend(fx.start, {width: $el.width(), height: $el.height()});
 
      fx._sizer = {};
 
      fx._sizer.topDelta = c.top - (c.top * fx.end.height / fx.start.height);
      fx._sizer.leftDelta = c.left - (c.left * fx.end.width / fx.start.width);
      fx._sizer.widthDelta = fx.end.width - fx.start.width;
      fx._sizer.heightDelta = fx.end.height - fx.start.height;
 
      fx._sizeInit = true;
   }
 
   fx.elem.style.top = fx.start.top + Math.floor(fx._sizer.topDelta * fx.pos) + 'px';
   fx.elem.style.left = fx.start.left + Math.floor(fx._sizer.leftDelta * fx.pos) + 'px';
   fx.elem.style.width = fx.start.width + Math.floor(fx._sizer.widthDelta * fx.pos) + 'px';
   fx.elem.style.height = fx.start.height + Math.floor(fx._sizer.heightDelta * fx.pos) + 'px';
 
}

参考記事

Extending jQuery Animate() Beyond Basic CSS Animation

Extending jQuery Animation - Custom Property "Size"

The jQuery animate() step callback function

weepy/jquery.path

test: jquery.path animation

louisremi/jquery.path

jQuery Scroll Pathカスタムトラックパスプラグイン--円形アニメーションループコンビネーションナビゲーションメニューを作成

：

コードの$の前の\はmarkdown解析エラーを回避するために追加された

です.

参考記事の最後のリンクはブログ園で禁止されていますが、リンクの%3Dを外すといいです