Topページ　 >　お勉強　 >　 Ajax　 >　ブラインドアップ（下から上に消す）する　

ブラインドアップ（下から上に消す）する

Effect.BlindUpメソッドを使用して、ブラインドアップを行います。

script.aculo.us

使用バージョン：1.64　公式サイト

1. ダウンロードしたprototype.jsを読み込みます。


          <script type="text/javascript"

　　　　　src="./prototype.js"></script>

2. ダウンロードしたscriptaculous.jsを読み込みます。


          <script type="text/javascript"

　　　　　src="./scriptaculous.js?load=effects"></script>

3. Effect.BlindUpメソッドを実行します。


          [HTML]

<div id="targetBox"><br /></div>

　:

　:

[JavaScript]

Effect.BlindUp("targetBox", {duration:2});

▲

Effect.Highlight( element, { option } )

element

エフェクトを行うエレメントのID

option

実行時のオプション（全て省略可能）
from:
　　エフェクト開始時の不透明度を指定
　　0.0～1.0
　　指定例） from:0.0
to:
　　エフェクト終了時の不透明度を指定
　　0.0～1.0
　　指定例） to:1.0
fps:
　　フレームレートを指定
　　指定例） fps:100
delay:
　　エフェクト処理開始までの秒数を指定
　　指定例） delay:5
duration:
　　エフェクト開始から終了するまでの秒数を指定
　　指定例） duration:2
beforeStartInternal:
　　エフェクト開始時に実行するメソッドを指定
　　指定例） beforeStartInternal:startLogic
afterFinishInternal:
　　エフェクト終了時に実行するメソッドを指定
　　指定例） afterFinishInternal:endLogic
transition:
　　処理の指定
　　Effect.Transitions.linear、Effect.Transitions.woddle、
　　Effect.Transitions.sinoidal、Effect.Transitions.pulse、
　　Effect.Transitions.reverse、Effect.Transitions.none、
　　Effect.Transitions.flicker、Effect.Transitions.full
　　指定例） transition:Effect.Transitions.sinoidal

ファイル一式をダウンロードする

▲

↓インラインフレーム内でサンプルが動作しています。

▲

[Ajax - script.aculo.us - 画面]

フェードイン、フェードアウトする　【Effect.Highlight】

ブラインドダウン（上から下に表示）する　【Effect.BlindDown】