水平線を引くアニメーション

水平線を引くアニメーションの実装をいくつかやってみます。

左から右へ線を引く

まずはベタ塗りの線を引いてみます。

HTML

<div id="horizon1"></div>

CSS

#horizon1 {
	position: absolute;
	top: 100px;
	left: 0;
	width: 0;
	height: 5px;
	background: #E74C3C;
}

JavaScript

$(function() {
	winW = $(window).width();
	spped = 3000;
	$('#horizon1').animate({
		width: winW
	}, spped);
});

線の塗りは背景色で、widthを0から画面幅に広げてアニメーションしています。
左から右へ線を引くデモページ1
　

ベタ塗りではなく画像で線を引いてみます。

HTML

<div id="horizon2"></div>

CSS

#horizon2 {
	position: absolute;
	top: 100px;
	left: 0;
	width: 0;
	height: 5px;
	background: url(horizon.gif) left center repeat-x;
}

JavaScript

$(function() {
	winW = $(window).width();
	spped = 3000;
	$('#horizon2').animate({
		width: winW
	}, spped);
});

やっていること自体は1番目と同じで、背景をベタ塗りから背景画像を表示するように変更しています。
左から右へ線を引くデモページ2
　

線の引き始めをグラデーションで徐々に表示するように引いてみます。

HTML

<div id="horizon3">
<div id="horizon3-inner"></div>
</div>

CSS

#horizon3 {
	position: absolute;
	top: 100px;
	left: 0;
	width: 0;
	height: 5px;
	background: url(horizon.gif) left center repeat-x;
}
#horizon3-inner {
	width: 100%;
	height: 5px;
	background: url(grad.png) right center no-repeat;
}

JavaScript

$(function() {
	winW = $(window).width();
	spped = 3000;
	$('#horizon3').animate({
		width: winW
	}, spped);
});

線を引く要素の子要素に、透過→白のグラデーション画像を背景に指定した要素を配置し、線を引くアニメーションの上にグラデーション画像が重なるようにしています。
左から右へ線を引くデモページ3
　

中央から左右へ線を引く

中央から左右へ線を引いてみます。

HTML

<div id="horizon4"></div>

CSS

#horizon4 {
	position: absolute;
	top: 100px;
	left: 0;
	width: 0;
	height: 5px;
	background: #E74C3C;
}

JavaScript

$(function() {
	winW = $(window).width();
	spped = 3000;
	$('#horizon4').css({
		left: winW / 2
	}).animate({
		left: 0,
		width: winW
	}, spped);
});

leftを画面幅の半分(画面中央)にして、そこから0になるようにアニメーションしています。
それと同時に、widthを0から画面幅に広げてアニメーションするようにしています。
中央から左右へ線を引くデモページ