フェードイン/フェードアウトさせる

書式

new Rico.Effect.FadeTo(element, opacity, duration, steps, options)

element : ページ上のエレメント
opacity : 不透明度 (0〜100)
duration : フェード時間(ミリ秒)
steps : フェードのステップ
options : オプション【省略可能】

説明

 フェードイン/フェードアウトさせるにはRico.Effect.FadeTo()を使います。パラメータにはフェード処理するページ上のエレメント、不透明度、フェード処理にかかる時間、フェード処理のステップを指定します。オプションにはcompleteでフェード完了時の処理を指定することができます。

サンプルコード [実行]

<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="rico.js"></script>
<script type="text/javascript"><!--
function startFade(n){
new Rico.Effect.FadeTo("box", n, 100, 10,
{ complete:function(){ alert("フェード終了"); } }
);
}
// --></script>
</head>
<body>
<h1>不透明度処理</h1>
<form>
<input type="button" value="10%に設定" onClick="startFade(0.1)">
<input type="button" value="50%に設定" onClick="startFade(0.5)">
<input type="button" value="100%に設定" onClick="startFade(1)">
</form>
<div id="box">Ricoサンプル</div>
</body>
</html>