bytefxでカラー変更処理や移動処理などを停止させるにはbytefx.clear()を使います。bytefx.clearの書式は以下のようになります。
bytefx.clear(対象オブジェクト)
対象オブジェクトはdocument.getElementById()などで指定します。bytefx.clearを使うと複数の処理が指定されている場合、全て停止されます。単純に言えばオブジェクトに設定されているタイマー処理が全部停止することになります。
以下のサンプルではボタンをクリックするとカラー変更処理と移動処理の両方が停止します。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>bytefx : 停止処理</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="bytefx_OS.js"></script>
<script type="text/javascript"><!--
function fademove()
{
bytefx.color(document.getElementById("box"), "backgroundColor", "#ff0000", "#0000ff", 1);
bytefx.move(document.getElementById("box"), {x:300, y:250}, 0.1);
}
function fadestop()
{
bytefx.clear(document.getElementById("box"));
}
// --></script>
</head>
<body>
<h1>bytefx : 停止処理</h1>
<form>
<input type="button" value="カラー変更＆移動開始" onClick="fademove()">
<input type="button" value="停止" onClick="fadestop()">
</form>
<div id="box">bytefx : を使ったカラー変更サンプル</div>
</body>
</html>
個別に停止させる場合にはオブジェクトのbytefx配列に設定されている処理の名前を指定しclearInterval()のパラメータに指定します。bytefx[]で指定する名前はcolor, fade, move, sizeのいずれかになります。以下のサンプルではボタンをクリックすると移動処理だけが停止しカラー変更処理は継続されます。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>bytefx : 停止処理</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="bytefx_OS.js"></script>
<script type="text/javascript"><!--
function fademove()
{
bytefx.color(document.getElementById("box"), "backgroundColor", "#ff0000", "#0000ff", 1);
bytefx.move(document.getElementById("box"), {x:300, y:250}, 0.1);
}
function fadestop()
{
var obj = document.getElementById("box");
clearInterval(obj.bytefx["move"]);
}
// --></script>
</head>
<body>
<h1>bytefx : 停止処理 (2)</h1>
<form>
<input type="button" value="カラー変更＆移動開始" onClick="fademove()">
<input type="button" value="停止" onClick="fadestop()">
</form>
<div id="box">bytefx : を使ったカラー変更サンプル</div>
</body>
</html>
[
エフェクトの目次へ]
[
「Ajaxを勉強しよう」の目次へ]
(2006.10.8)