jQueryでApple風インフォメーション

Appleのサイトにある「Hot News Headlines」みないなお知らせ・インフォメーションを作りたかったのでjQueryで作成してみました。
省スペース且つ動きがあるので効果的なインフォメーションだと思います。

アップルのサイトはこちら

トップページの中段くらいにあるやつです。

Apple風インフォメーション

■html

<body>
<div id="news">
<ul>
<li>～お知らせ内容1～</li>
<li>～お知らせ内容2～</li>
<li>～お知らせ内容3～</li>
</ul>
</div>
</body>

■css

#news ul {
  height: 30px;
  line-height: 30px;
  overflow: hidden;
}

■javascript

$(function() {
	function headline() {
		setTimeout(function() {
			headline();
			$("#news li").not(':first').css('display', 'none');
			$("#news li:first").fadeOut('normal', function() {
				$(this).next().fadeIn('normal');
				$(this).clone().appendTo("#news ul");
				$(this).remove();
			});
		}, 3000);
	}
	var n_size = $("#news li").size();
	if(n_size > 1) {
		headline();
	}
});

解説

jQueryのスクリプト解説の前にcssの説明をします。
今回は一行分のお知らせだけを表示するので、それ以外は表示されないようにします。

#news ul {
  height: 30px;
  line-height: 30px;
  overflow: hidden;
}

やり方は上記のようにして高さを30pxで固定し、overflow（はみ出した領域）をhidden（非表示）とします。
以下のhtmlソースの場合、初期は「～お知らせ内容1～」だけが表示されます。

<body>
<div id="news">
<ul>
<li>～お知らせ内容1～</li>
<li>～お知らせ内容2～</li>
<li>～お知らせ内容3～</li>
</ul>
</div>
</body>

つづいてスクリプトの説明です。
関数を作成し、その中でsetTimeoutを実行します。
setTimeoutを使うことで指定時間毎に処理を繰り返すことができます。今回は3000ミリ秒（3秒）ごとにお知らせの内容を切り替えます。

$(function() {
	function headline() {
		setTimeout(function() {
		//処理内容
		}, 3000);
	}
});

setTimeoutで処理する内容です。
まず、setTimeoutの処理事態が記載されている関数「headline」を実行します。

			headline();

次に、liタグの内、一つ目以外は非表示にします。
先に説明したとおりhtmlとcssによって、一つ目のliタグの中身以外は表示されない（overflow: hidden;）ようにしているので必要ないのでは？と思うかもしれませんが、ここでわざわざ非表示にしているのはお知らせを切り替える時にフェードインのエフェクト効果を入れる為です。

			$("#news li").not(':first').css('display', 'none');

次はエフェクトの処理とli要素の削除・複製・追加です。
まず、一つ目のliタグをフェードアウトします、今回はフェードアウトの早さを「normal」にしていますが、ここはお好みで調整して下さい。

フェードアウトが終わったらコールバック関数で、二つ目のliタグをフェードインします。同時にフェードアウトした一つ目のliタグを複製し一番最後に追加します。
最後にフェードアウトした一つ目のliタグを削除します。

			$("#news li:first").fadeOut('normal', function() { //一つ目のliタグをフェードアウト
				$(this).next().fadeIn('normal'); //二つ目のliタグをフェードイン
				$(this).clone().appendTo("#news ul"); //一つ目のliタグを複製
				$(this).remove(); //一つ目のliタグを削除
			});

ここまでで、Apple風インフォメーションの9割がたは完成です。あとは、ページの読み込み時に関数「headline」を実行すればOKです。

ただお知らせが1つの時は動作がおかしくなりますでの条件文を使って、お知らせが1つ以上ある場合にのみ上記のエフェクトを実行するようにします。
やり方は変数n_sizeにliタグの数を格納し、