Class: Fx.Tween

Fx.TweenとElementのElement.tweenへのショートカットから成っています。

継承:

Fx

Fx.Tweenメソッド: constructor

あらゆるCSSプロパティをある値から別の値へ遷移させるトゥイーンエフェクトです。

構文:

var myFx = new Fx.Tween(element, [, options]);

引数:

  1. element - (いろいろ) アニメーションを適用したい要素そのものか、要素のID。
  2. options - (オブジェクト, オプション) Fxオプションオブジェクトと、以下に挙げられるオプションです:

オプション:

  • property - (文字列) 遷移させたいCSSプロパティ(例:'width', 'color', 'font-size', 'border',など)。オプションが省略された場合、startメソッドかsetメソッドの第1引数にプロパティを指定しなければなりません。初期値はnullです。

注意点:

  • Element:setStyleで設定できるすべてのCSSプロパティはFx.Tweenによって遷移させることができます。
  • border-styleやbackground-imageのように、プロパティが数学的に計算できないものであれば、アニメーション開始とともにすぐに変更されます。
  • プロパティオプションを使う場合、startメソッドとsetメソッドに引数を渡してはいけません。

参考情報:

Fx.Tweenメソッド: set

要素のCSSプロパティに対して任意の値を即座にセットします。

構文:

myFx.set(property, value);

引数:

  1. property - (文字列) 値を設定したいCSSプロパティ。プロパティオプションを使用した場合は省略すること。
  2. value - (いろいろ) このインスタンスにセットしたいCSSプロパティの値。

戻り値:

  • (オブジェクト) このFx.Tweenインスタンス。

例:

var myFx = new Fx.Tween(element);
//背景色を即座に赤にします:
myFx.set('background-color', '#f00');

注意点:

プロパティオプションを使用する場合、startメソッドとsetメソッドに引数を渡してはいけません。

Fx.Tweenメソッド: start

特定の値まで、CSSプロパティを遷移させます。

構文:

myFx.start([property,] [from,] to);

引数:

  1. property - (文字列, オプションにない場合のみ) 遷移させたいCSSプロパティ。プロパティオプションを使用した場合は省略すること。
  2. from - (いろいろ, オプション) エフェクト開始時のCSSプロパティの値。
  3. to - (いろいろ) エフェクトのターゲットとなるCSSプロパティ値。

戻り値:

  • (オブジェクト) このFx.Tweenインスタンス。

例:

var myFx = new Fx.Tween(element);

//要素の背景色を黒から赤に遷移させます:
myFx.start('background-color', '#000', '#f00');
//要素の背景色を現在の色から青に遷移させます:
myFx.start('background-color', '#00f');

注意点:

  • 引数が一つしか渡されていない場合、第1引数がターゲット値として使用され、初期値は現在の状態から算出された値になります。
  • 色を使う場合、RGBカラー値か16進数カラー値が使われます。
  • プロパティオプションを使用した場合、startメソッドとsetメソッドにプロパティを渡してはいけません。

Hash: Element.Properties

参考:Element.Properties

Elementプロパティ: tween

要素のFx.Tweenインスタンスにデフォルトオプションを設定・取得します。

Set:

構文:

el.set('tween'[, options]);

引数:

  • options - (オブジェクト) Fx.Tweenオプション。

戻り値:

  • (要素) この要素。

例:

el.set('tween', {duration: 'long'});
el.tween('color', '#f00');

Get:

構文:

el.get('tween', [options]);

引数:

  1. property - (文字列) Fx.Tweenプロパティの引数。
  2. options - (オブジェクト) Fx.Tweenオプション。

戻り値:

  • (オブジェクト) 要素内のFx.Tweenインスタンス。

例:

el.get('tween', {property: 'opacity', duration: 'long'}).start(0);

注意点:

  • 要素のTweenインスタンスをElement:setで初期化するときは、Tweenにプロパティを渡してはいけません。
  • プロパティを指定するのは、実際のFx.TweenインスタンスにElement:getを行うときか、Element:tweenを呼び出すときのみです。
  • setメソッドやgetメソッドにオプションを渡すと、新しいインスタンスが作られます。
  • 他のElementショートカットと同じく、setメソッドとgetメソッドの違いは、getがインスタンスを返す一方で、setは要素を返すという点です(連結と初期化のため)。

Native: Element

$関数で取得したDOM要素がすべてのメソッドを使えるようにするカスタムネイティブです。

Elementメソッド: tween

一つのCSSプロパティを即座に遷移させるためのElementのショートカットメソッドです。

構文:

myElement.tween(property, startvalue[, endvalue]);

引数:

  1. property - (文字列) アニメーションさせたいCSSプロパティ。プロパティオプションをすでに設定しているときは省略すること。
  2. startvalue - (いろいろ) 遷移の初期値。
  3. endvalue - (いろいろ) 遷移のターゲット値。これを省略した場合、startvalueがターゲット値として使われます。

戻り値:

  • (要素) この要素。

例:

//"myElement"の幅を現在の値から100pxに遷移させます:
$('myElement').tween('width', '100');

//"myElement"の高さを20pxから200pxに遷移させます:
$('myElement').tween('height', [20, 200]);

//"myElement"のボーダーを現在の値から"6px solid blue"へ変化させます:
$('myElement').tween('border', '6px solid #36f');

参考情報:

Elementメソッド: fade

透明度アニメーションのためのElementのショートカットメソッド。要素を特定の透明度までフェードイン・フェードアウトさせるのに役立ちます。

構文:

myElement.fade([how]);

引数:

  1. how - (いろいろ, オプション: 初期値='toggle') 数字か文字列による透明度の指定。次の値を使えます:
    • 'in' - 要素を不透明度100%までフェードインさせます。
    • 'out' - 要素を不透明度0%までフェードアウトさせます。
    • 'show' - 要素の不透明度を即座に100%に設定します。
    • 'hide' - 要素の不透明度を即座に0%に設定します。
    • 'toggle' - 要素が表示されていればフェードアウトさせ、そうでなければフェードインさせます。
    • (数) - 0から1の間の少数値。この不透明度まで要素をフェードさせます。

戻り値:

  • この要素。

例:

$('myElement').fade('out'); //"myElement"をフェードアウト。
$('myElement').fade(0.7); //"myElement"を70%までフェードアウト。

Elementメソッド: highlight

背景色を遷移させるためのElementショートカットメソッドです。要素の背景色を指定した色に即座に変更し、それから元の色に戻します。

構文:

myElement.highlight([start, end]);

引数:

  1. start - (文字列, オプション: 初期値='#ff8') 遷移を開始する色。
  2. end - (文字列, オプション: 初期値=要素に設定されていたbackground-color) ハイライトエフェクトの後に戻る色。

注意点:

要素に背景色が設定されていない、または'tranparent'に設定されている場合、初期値と終了値は白になります。

戻り値:

  • (要素) この要素。

例:

//背景色を即座に水色に変え、それから元の色(または白)に戻します:

$('myElement').highlight('#ddf');

//背景色を即座に水色に変え、それからグレーにフェードさせます:
$('myElement').highlight('#ddf', '#ccc');

このドキュメントはMooToolsのドキュメントを元に高橋文樹が翻訳（ちょっと改変）しました。
本家と同じく、Attribution-NonCommercial-ShareAlike 3.0ライセンスで公表されています。

トップに戻る