jQueryで背景画像を無限ループ

jQueryで背景画像を無限ループ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryで背景画像を無限ループ</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function () {
	//アニメーションスピード
	var scrollSpeed = 0.1;
	//画像サイズ
	var imgWidth = 1600;
	//画像の位置
	var posX = 0;
	//ループ処理
	fadeTimer = setInterval(function(){
		//画像のサイズまで移動したら0に戻る。
		if (posX >= imgWidth){
			posX= 0;
		}
		posX += scrollSpeed;
		$('body').css("background-position",posX+"px 0");
	}, 1);
});
</script>
<style>
body{
	background: #FFF url(bg.png) repeat-x;
	margin:0;
	padding:0;
}
#container {
	margin: 200px auto 0px;
	width: 800px;
	background: #FFF;
	padding: 30px;
	height: 500px;
}
</style>
</head>
<body>
<div id="container">
<h1>jQueryで背景画像を無限ループ</h1>
<p>
jQueryで背景画像をアニメーションループさせる。
</p>
</div>
</body>
</html>