不透明度を変える

書式

　obj = new fx.Opacity( element, {
　　duration:msec,
　　onComplete:func }
　　 )

　　obj.toggle()
　　obj.hide()
　　obj.custom(startValue, endValue)
　　obj.clearTimer()

　element : ページ上のエレメント
　msec : 処理完了までの時間 (ミリ秒)【省略可能】
　func : 処理完了時に呼び出す処理【省略可能】
　startValue : 開始値
　endValue : 終了値

説明

　不透明度を変えるにはfx.Opacity()を使います。パラメータには処理対象にするタグを指定します。fx.Opacity()で生成したオブジェクトに対してメソッドを指定することで不透明度を変更することができます。toggle()は不透明度を0にする、元に戻すというトグルスイッチの処理を行います。hide()はオブジェクトを非表示にします。custom()は不透明度を独自に設定したい場合に使います。パラメータには開始値と終了値の2つを指定します。clearTimer()はアニメーション処理を停止させます。

Ajaxライブラリ リファレンス

サンプルコード [実行]

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="moo.fx.js"></script>
<script type="text/javascript"><!--
window.onload = function(){
divObj = new fx.Opacity("box", { duration:500, onComplete:msg });
}
function changeOpacity(){
divObj.toggle();
}
function msg(){ alert("エフェクト終了"); }
// --></script>
</head>
<body>
<h1>不透明度を変える</h1>
<form>
<input type="button" value="不透明度を変更" onClick="changeOpacity()">
</form>
<div id="box">
ここの不透明度が変わります。<br>
フェードイン／フェードアウトが可能です。
</div>
</body>
</html>