表示のエフェクト (2/4)
作成:2010-04-14 14:00
更新:2010-05-12 10:49
更新:2010-05-12 10:49
■コールバック関数
show/hideは、表示したり非表示にしたりするものですが、このエフェクトの処理は、非同期で実行される点に注意しなければいけません。つまり、show/hideを実行したとき、視覚効果が終わるまで待ってから次の処理を実行するのではなく、エフェクト表示を開始したらどんどん先に進んでしまうのです。
従って、「視覚効果が完了したら何かの処理を行う」という場合、非同期の表示が終わった後で処理が呼び出されるような仕組みを考える必要があります。これは、show/hideを呼び出す際、エフェクト後のコールバック関数を用意することで解決できます。
下に、簡単なサンプルをあげておきましょう。ここでは、イメージをクリックしてイメージが消えると、その下にあるメッセージも消えるようになっています。イメージの視覚効果後に、メッセージを消す視覚効果を実行しているのです。このように、「いくつかある要素を次々に消していく」というような場合には、「コールバック関数から次の要素を消すためのエフェクト機能を呼び出す」というやり方は非常にシンプルでわかりやすく、簡単に効果を設定できます。
従って、「視覚効果が完了したら何かの処理を行う」という場合、非同期の表示が終わった後で処理が呼び出されるような仕組みを考える必要があります。これは、show/hideを呼び出す際、エフェクト後のコールバック関数を用意することで解決できます。
show( ミリ秒数 , 関数 );このように、第２引数に関数を指定することで、エフェクト完了後、これらが呼び出され事後処理を行うようになります。
hide( ミリ秒数 , 関数 );
下に、簡単なサンプルをあげておきましょう。ここでは、イメージをクリックしてイメージが消えると、その下にあるメッセージも消えるようになっています。イメージの視覚効果後に、メッセージを消す視覚効果を実行しているのです。このように、「いくつかある要素を次々に消していく」というような場合には、「コールバック関数から次の要素を消すためのエフェクト機能を呼び出す」というやり方は非常にシンプルでわかりやすく、簡単に効果を設定できます。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">
<script src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
<!--
function doAction(){
$('#target').hide(3000,hideMsg);
alert("ok");
}
function doAction2(){
$('#target').show(3000,showMsg);
}
function hideMsg(){
$('#msg').hide(3000);
}
function showMsg(){
$('#msg').show(3000);
}
//-->
</script>
</head>
<body>
<H1 onclick="doAction2();">TEST.</H1>
<span id="target" onclick="doAction();">
<img src="sample.jpg" id="image1">
</span>
<div id="msg" style="background:#CCCCFF; font-size:14pt;">
視覚効果のコールバック関数でメッセージを消す
</div>
</body>
</html>
※関連コンテンツ