jQueryで背景画像をフェードイン・フェードアウトする方法の覚書です。
<script>
var speed = 1000; // フェードイン・フェードアウトの処理時間（1000で1秒）
var times = 5000; // 画像切り替えの間隔（1000で1秒）
var bgimages = [
'a.jpg',
'b.jpg',
'c.jpg' // 最後に,をつけない
];
var position = ['-150px','-100px', '0'];
$(function(){
// 現在の背景画像番号格納する変数
var thisnum = 0;
// 定期的に実行
setInterval(function(){
// 背景をフェードアウト
$(".bg").fadeOut(speed,function(){
// 背景画像番号変更
thisnum = thisnum === bgimages.length - 1 ? 0 : thisnum + 1;
// 背景画像を変更しフェードイン
$(this).css({"background-image":"url("+bgimages[thisnum]+")","background-position":position[thisnum] + " 0"}).fadeIn(speed);
});
}, times);
});
</script>
参考サイトのコードにbackground-positionを追加しています。
参考サイト
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q10103591355