Rico.jsで移動処理後に関数を呼び出す

 Rico.jsで移動処理後に関数を呼び出すには各処理のオプションで{ complete:終了時の処理 }を指定します。以下の例では移動処理完了後に関数abcを実行します。

new Rico.Effect.Position("test",200,300,100,10, { complete:abc })

以下のサンプルでは移動後にオブジェクトがフェードインします。(サンプルを実行する

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>移動処理後に関数を呼び出す</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 moveFade()
{
new Rico.Effect.FadeTo("box",0.2,100,1);
new Rico.Effect.Position("box",300,200,100,60,{complete:fadein });
}
function fadein()
{
new Rico.Effect.FadeTo("box",1.0,100,50);
}
// --></script>
</head>
<body>
<h1>Rico.js移動処理後に関数を呼び出す</h1>
<form>
<input type="button" value="移動" onClick="moveFade()">
</form>
<div id="box">移動後にフェードアウトします。</div>
</body>
</html>

[目次へ]

(2006.2.19)