【jQuery】メッセージの循環表示




上のように、ボックス内のメッセージが時間と共に
なめらかに切り替わるサンプルです。


…こういう、装飾的な機能はほとんど勉強せずにいたので
今回、サンプル制作にあたり、苦労しました…。


【実演ページ】
http://www.usamimi.info/~sutara/sample/cycle_message.html


【要点】
jQueryの『fadeOut(非表示)』『fadeIn(再表示)』を使っています。
特に、どちらも第2引数にコールバック関数を設置し、
fadeOutによる非表示が完了した後に、陰で次のメッセージを用意し、
fadeInによる再表示が完了した後に、表示し続ける時間のカウントを
始めている点が重要だと思います。


『setInterval』ではfadeOut,fadeInの実行中も止まらずに時間を
カウントし続けるので、『setTimeout』を、フェードアウト・
フェードインのひとつのサイクルが終了するたびに呼び出しています。


ソースコード全文】

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テスト1(HTML)</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
//メッセージとURLの連想配列
var msg_arr = [
['ようこそ!','hoge.html'],
['これはサンプルです','fuga.html'],
['jQueryを使っています','piyo.html']
];
//グローバル変数
var msg_num = 0; //現在のメッセージ番号
var msg_max = msg_arr.length; //メッセージの最大値
var interval = 1000; //切り替えの間隔(1秒)
//---------------------------------------------
//メッセージを循環表示
//---------------------------------------------
function cycleMsg(){
//フェードアウト(非表示にする)
$('#msg_area p').fadeOut('slow', function(){
$('#msg_area p').html(setMsg());
});
//フェードイン(表示する)
$('#msg_area p').fadeIn('slow', function(){
//再び自分自身を呼び出す
setTimeout(cycleMsg, interval);
});
}
//---------------------------------------------
//配列をリンクテキストにする
//---------------------------------------------
function setMsg(){
var link_text = '' +
'<a href="' + msg_arr[msg_num][1] + '">' +
msg_arr[msg_num][0] +
'</a>';
//次のメッセージ番号を準備
msg_num++;
if(msg_num == msg_max) msg_num = 0;
return link_text;
}
//---------------------------------------------
//ページ読み込み後の処理
//---------------------------------------------
jQuery(document).ready(function($){
//はじめに表示しておく文字
$('#msg_area p').html(setMsg());
//一定時間毎にメッセージを変更
setTimeout(cycleMsg, interval);
});
</script>
<style type="text/css">
#msg_area{
width:318px;
border:1px solid #227;
}
</style>
</head>
<body>
<div id="msg_area">
<p></p>
</div>
</body>
</html>