背景圖像褪色jquery

Question

我有一個div，我想隨機淡出和5個不同的背景圖像。

我已經爲此下載了一個jquery插件，但不幸的是它交替出現 - 我會解釋。

您必須設置一個默認背景圖像（對於這種情況可以說「image1」），然後加載一個圖像數組（例如image2，image3，image4和image5）。插件所做的是複製div並將其直接放在原始區域上，然後淡入然後將其中一個圖像陣列。我是從這樣獲得的不良反應爲：

1,2,1,3,1,4,1,5

，而不是：

1,2,3,4 ，5

因爲淡出簡單再次顯示默認圖像。

沒有重新發明輪子，有一種方法可以修改代碼，當淡入動畫完成時（默認是完全隱藏的）我將背景div上的圖像換出，這樣當淡出從下面開始有新圖片？我對JQuery比較陌生，所以這不是我的強項。

繼承人的插件的動作部分：在我的HTML

var tempImage = new Image(); 

jQuery(tempImage).load(function(){ 
    var newImage = (helperElement.css('display') == 'block') ? jQuery(this) : jQuery(helperElement); 
    newImage.css('backgroundImage', 'url('+tempImage.src+')'); 
    helperElement.animate(settings.effect, settings.duration, settings.easing, settings.callback); 
}); 

tempImage.src = src; 

和：

<script> 
    document.getElementById('content_container_home').style.backgroundImage = "url('img/buttons.jpg')"; 
    $(function(){ 
     var bgImages = [ 'barker.jpg', 'boards.jpg', 'feet.jpg', 'glasses.jpg' ]; 
     var currImage = 'buttons.jpg'; 
     setInterval(function(){ 
      do{ 
       var randImage = bgImages[Math.ceil(Math.random()*(bgImages.length-1))]; 
      }while(randImage == currImage) 
       currImage = randImage; 
      $('#content_container_home').BgImageTransition('img/'+currImage); 
      }, 5000) 
    }); 
</script> 

Answer 1

看看我的答案another question

這應該做的伎倆：

HTML：

<div id="testers"> 
    <div class="tester"> 
     <img src="http://regmedia.co.uk/2008/03/18/google_adwords_machine.png" alt="" /> 
    </div> 
</div> 
<div id="morework"> 
    <div class="holderdiv"> 
    <div class="tester"> 
     <img src="http://www.swwebs.co.uk/images/google-pagerank.jpg" alt="" /> 
    </div> 
    </div> 
    <div class="holderdiv"> 
    <div class="tester"> 
     <img src="http://jsfiddle.net/favicon.gif" alt="" /> 
    </div> 
    </div> 
</div> 

CSS：

#morework{display:none;} 

的jQuery：

$(document).ready(function(){ 
    function runIt(){ 
    $('#morework').find('.holderdiv').each(function(i, elem) { 
     $("#testers").delay(5000).fadeOut(1000, function() { 
     $(this).html($(elem).html()); 
     }).fadeIn(1000, runIt); 
    }); 
    }; 
    runIt() 
}); 

檢查它在這裏的行動 - http://jsfiddle.net/sfsPx/