Topページ　 >　お勉強　 >　 Ajax　 >　フェードイン、フェードアウトする　

フェードイン、フェードアウトする

Effect.Highlightメソッドを使用して、フェードイン、フェードアウトの制御を行います。

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.Highlightメソッドを実行します。


          [HTML]

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

　:

　:

[JavaScript]

Effect.Highlight(

　　　　"targetBox",

　　　　{startcolor:'#FFFFFF', endcolor:'#BBCCDD',

　　　　 restorecolor:'#BBCCDD', duration:0.5});

▲

Effect.Highlight( element, { option } )

element

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

option

実行時のオプション（全て省略可能）
startcolor:
　　開始の色を指定
　　指定例） startcolor:'#FFFFFF'
endcolor:
　　終了の色を指定
　　指定例） endcolor:'#000000'
restorecolor:
　　終了した後の色を指定
　　指定例） restorecolor:'#000000'
from:
　　エフェクト開始時の不透明度を指定（0.0～1.0）
　　0.0～1.0
　　指定例） from:0.0
to:
　　エフェクト終了時の不透明度を指定（0.0～1.0）
　　0.0～1.0
　　指定例） to:1.0
fps:
　　フレームレートを指定
　　指定例） fps:100
delay:
　　エフェクトを開始するまでの時間
　　指定例） delay:5
duration:
　　エフェクト開始から終了するまでの秒数を指定
　　指定例） duration:2
beforeStartInternal:
　　エフェクト開始時に実行するメソッドを指定
　　指定例） beforeStartInternal:testMethod
afterFinishInternal:
　　エフェクト終了時に実行するメソッドを指定
　　指定例） afterFinishInternal:testMethod
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.BlindDown】

ブラインドアップ（下から上に消す）する　【Effect.BlindUp】