Class: Fx.Elements

Fx.Elementsは複数の要素に対して複数のスタイルを一括でアニメーションさせることができます。

継承:

Fx

構文:

new Fx.Elements(elements[, options]);

引数:

1. elements - (配列) エフェクトを適用したい要素のコレクション。
2. options - (オブジェクト, オプション) Fxオプションに同じ。

戻り値:

• (オブジェクト) 新しいFx.Elementsインスタンス。

例:

var myFx = new Fx.Elements($$('.myElementClass'), {

    onComplete: function(){
        alert('complete');
    }
}).start({

    '0': {
        'height': [200, 300],
        'opacity': [0,1]

    },
    '1': {
        'width': [200, 300],
        'opacity': [1,0]

    }
});

注意点:

• 色を扱う場合は16進数表記でなくてはなりません。

Fx.Elementsメソッド: set

渡されたスタイルを、それぞれのオブジェクトを命名的に適用します(例を参照)。遷移はありません。

構文:

myFx.set(to);

引数:

1. to - (オブジェクト) オブジェクトの各アイテムは数値文字列で参照されます(1つのインスタンスが"1"です)。はじめのアイテムが"0"、2番目のアイテムが"1"という具合です。

戻り値:

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

例:

var myFx = new Fx.Elements($$('.myClass')).set({

    '0': {
        'height': 200,
        'opacity': 0
    },
    '1': {

        'width': 300,
        'opacity': 1
    }
});

Fx.Elementsメソッド: start

渡されたスタイル遷移をそれぞれのオブジェクトに対して命名的に適用します(例を参照)。

構文:

myFx.start(obj);

引数:

1. obj - (オブジェクト) オブジェクトの各アイテムは数値文字列で参照されます(1つのインスタンスが"1"です)。はじめのアイテムが"0"、2番目のアイテムが"1"という具合です。

戻り値:

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

例:

var myElementsEffects = new Fx.Elements($$('a'));
myElementsEffects.start({

    '0': { //最初の要素の不透明度と幅を変えましょう。
        'opacity': [0,1],
        'width': [100,200]

    },
    '4': { //そして、5番目の要素の不透明度を変えます。
        'opacity': [0.2, 0.5]

    }
});