webcreator.me

jQueryで背景画像をフェードイン・フェードアウトする方法

空のdivに背景を表示しています。

jQuery(document).ready(function($){

  //TOPメイン画像の背景fadeで切り替え
  var speed = 3000; // フェードイン・フェードアウトの処理時間（1000で1秒）
  var times = 7000; // 画像切り替えの間隔（1000で1秒）
  var bgimages = ['main_bg_chnge01.png', 'main_bg_chnge02.png'];// 最後に,をつけない
  $(function(){
    // 現在の背景画像番号格納する変数
    var thisnum = 0;
    setInterval(function(){
      // 背景をフェードアウト
      $("#sec01 .sec01_inner_bg").fadeOut(speed,function(){
        // 背景画像番号変更
        thisnum = thisnum == bgimages.length - 1 ? 0: thisnum + 1;
        // 背景画像を変更しフェードイン
        $(this).css({
          "background-image":"url(/wp-content/themes/lulutheme/images/"+bgimages[thisnum]+")"
          }).fadeIn(speed);
      });
    }, times);
  });

});

参考サイト
http://thisisstandarz.com/jquery-background-fadein-fadeout/