Class: Fx

Fx.TransitionsはベースとなるFxコンストラクタを上書きし、transitionオプションを文字列として使えるようにします。

Transitionオプション:

エフェクトに用いる方程式。Fx.Transitionsを参照のこと。関数(ex: Fx.Transitions.Sine.easeIn)と文字列('sine:in', 'bounce:out' or 'quad:in:out')の両方を受け入れ、Fx.Transitions.Sine.easeIn / Fx.Transitions.Bounce.easeOut / Fx.Transitions.Quad.easeInOutへとマッピングします。

Hash: Fx.Transitions

Fxクラスに用いるアニメーション遷移のバリエーション。

例:

//初期値=Elastic.easeOut:
var myFx = $('myElement').effect('margin', {transition: Fx.Transitions.Elastic.easeOut});

参考情報:

• Robert Penner's Easing Equations

Fx.Transitionsメソッド: linear

一次方程式による遷移。

Fx.Transitionsメソッド: quad

二次方程式による遷移。Quad.easeIn、Quad.easeOut、Quad.easeInOutのいずれか。

Fx.Transitionsメソッド: cubic

三次方程式による遷移。Cubic.easeIn、Cubic.easeOut、Cubic.easeInOutのいずれか。

Fx.Transitionsメソッド: quart

四次方程式による遷移。Quart.easeIn、Quart.easeOut、Quart.easeInOutのいずれか。

Fx.Transitionsメソッド: quint

五次方程式による遷移。Quint.easeIn、Quint.easeOut、Quint.easeInOutのいずれか。

Fx.Transitionsメソッド: pow

Quad、Cubic、Quart、Quintを生成するために使われます。Used to generate .

注意点:

• 初期値はp^6.

Fx.Transitionsメソッド: expo

幾何級数的な遷移。Expo.easeIn、Expo.easeOut、Expo.easeInOutのいずれか。

Fx.Transitionsメソッド: circ

余弦波による遷移。Circ.easeIn、Circ.easeOut、Circ.easeInOutのいずれか。

Fx.Transitionsメソッド: sine

正弦波による遷移。Sine.easeIn、Sine.easeOut、Sine.easeInOutのいずれか。

Fx.Transitionsメソッド: back

一端下がってから進みます。Back.easeIn、Back.easeOut、Back.easeInOutのいずれか。

Fx.Transitionsメソッド: bounce

バウンドしながら遷移します。Bounce.easeIn、Bounce.easeOut、Bounce.easeInOutのいずれか。

Fx.Transitionsメソッド: elastic

ゴムのようなカーブ。Elastic.easeIn、Elastic.easeOut、Elastic.easeInOutのいずれか。

Class: Fx.Transition

このクラスは自分でイージングの方程式を書ける数学の天才にしか役立たないでしょう。 'easeIn'、'easeOut'、'easeInOut'メソッドを持ったFx関数を返します。

構文:

var myTransition = new Fx.Transition(transition[, params]);

引数:

1. transition - (関数) Fx.Transitions関数か、ユーザーが作成したエージング関数。
2. params - (いろいろ, オプション) transition関数の第2引数として与えられる単一の値か、複数の値からなる配列。

戻り値:

• (関数) イージング関数。

例:

//Elastic.easeOutの伸び具合ににユーザーが任意の値を与えます。
var myTransition = new Fx.Transition(Fx.Transitions.Elastic, 3);

var myFx = $('myElement').effect('margin', {transition: myTransition.easeOut});

参考情報:

• Fx.Transitions