Class: Fx.Slide

スライドエフェクトは要素を垂直または水平にスライドさせます。コンテンツは内側に折りたたまれます。

注意点:

• Fx.Slideを使うには、ページを標準準拠モードで作成する必要があります。

継承:

• Fx

構文:

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

引数:

1. elements - (要素) スライドする要素。
2. options - (オブジェクト, オプション) すべてのFxオプションと、モード・ラッパーの指定。

オプション

1. mode - (文字列: 初期値='vertical') スライドのタイプを指定するための文字列。'vertical'か'horizontal'。
2. wrapper - (要素: 初期値=this.element) 他の要素をラッパーとして指定できます。

プロパティ:

1. open - (真偽値) いつスライド要素が表示されるのかを指示します。

例:

//要素を非表示にし、それからtoggleで元に戻して、最後に完了したら
//アラートを出します:
var mySlide = new Fx.Slide('container').hide().toggle().chain(function(){

    alert(mySlide.open); //アラート true
});

注意点:

• スライドエフェクトを作ると、要素(初期値は"div")が追加されて、与えられた要素を包みます。このラッパーには要素からのマージンが適用されます。

Fx.Slideメソッド: slideIn

要素を水平または垂直にスライドさせて表示します。

構文:

myFx.slideIn([mode]);

引数:

1. mode - (文字列, オプション) Fx.Slideオプションの値を'horizontal'か'vertical'に上書きします。

戻り値:

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

例:

var myFx = new Fx.Slide('myElement').slideOut().chain(function(){

    this.show().slideIn('horizontal');
});

Fx.Slideメソッド: slideOut

要素を水平または垂直にスライドさせて非表示にします。

構文:

myFx.slideOut([mode]);

引数:

1. mode - (文字列, オプション) Fx.Slideオプションの値を'horizontal'か'vertical'に上書きします。

戻り値:

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

例:

var myFx = new Fx.Slide('myElement', {

    mode: 'horizontal',
    //継承されているため、すべての[Fx][]オプションが使えます。
    onComplete: function(){
        alert('Poof!');
    }

//mode引数はセットされたオプションを上書きできます。
}).slideOut('vertical');

Fx.Slideメソッド: toggle

要素の現在の状態によって、スライドインさせたりスライドアウトさせたりします。

構文:

myFx.toggle([mode]);

引数:

1. mode - (文字列, オプション) Fx.Slideオプションの値を'horizontal'か'vertical'に上書きします。

戻り値:

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

例:

var myFx = new Fx.Slide('myElement', {
    duration: 1000,
    transition: Fx.Transitions.Pow.easeOut

});

//スライドインとスライドアウトを交互に二回トグルします:
myFx.toggle().chain(myFx.toggle);

Fx.Slideメソッド: hide

アニメーションなしで要素を非表示にします。

構文:

myFx.hide([mode]);

引数:

1. mode - (文字列, オプション) Fx.Slideオプションの値を'horizontal'か'vertical'に上書きします。

戻り値:

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

例:

var myFx = new Fx.Slide('myElement', {
    duration: 'long',
    transition: Fx.Transitions.Bounce.easeOut

});

//非表示にしてから、"myElement"をスライドインさせます:
myFx.hide().slideIn();

Fx.Slideメソッド: show

アニメーションなしで要素を表示します。

構文:

myFx.show([mode]);

引数:

1. mode - (文字列, オプション) Fx.Slideオプションの値を'horizontal'か'vertical'に上書きします。

戻り値:

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

Examples:

var myFx = new Fx.Slide('myElement', {
    duration: 1000,
    transition: Fx.Transitions.Bounce.easeOut

});

//"myElement"をスライドアウト
myFx.slideOut().chain(function(){

    //1秒待ってから、アニメーションなしで要素を表示します。
    this.show.delay(1000, this);
});

Hash: Element.Properties

参考情報:Element.Properties

Elementプロパティ: slide

要素にデフォルトのFx.Slideインスタンスを設定します。 以前に設定されたFx.Slideインスタンスを取得したり、デフォルトオプションから新しいインスタンスを生成したりします。

構文:

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

引数:

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

戻り値:

• (要素) この要素。

Example:

el.set('slide', {duration: 'long', transition: 'bounce:out'});
el.slide('in');

構文:

el.get('slide');

引数:

1. options - (オブジェクト, オプション) Fx.Slideオプション。これが渡されると、新しいインスタンスが生成されます。

戻り値:

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

例:

el.set('slide', {duration: 'long', transition: 'bounce:out'});
el.slide('in');

el.get('slide'); //Fx.Slideインスタンス生成

Native: Element

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

Elementメソッド: slide

この要素をスライドさせて表示します。

構文:

myElement.slide(how);

引数:

1. how - (文字列, オプション) 'in'、'out'、'toggle'、'show'、'hide'のいずれか。初期値は'toggle'。

戻り値:

• (要素) this Element.

例:

$('myElement').slide('hide').slide('in');