Background-Image fondu jquery

Question

J'ai un div et je veux fondre dans et hors de 5 images de fond différentes au hasard.

J'ai téléchargé un plugin jquery pour cela, mais malheureusement, il alterne - je vais vous expliquer.

Vous devez définir une image d'arrière-plan par défaut (pour ce cas, disons "image1"), puis charger un tableau d'images (par exemple image2, image3, image4 et image5). Ce que le plugin fait est de dupliquer le div et de le placer directement sur l'original, puis de se fondre dans, puis de sortir l'un des tableaux d'images. L'effet indésirable que je reçois de c'est:

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

par opposition à:

1,2,3,4 Parce que le fondu sortant simple révèle une fois de plus l'image par défaut. Sans réinventer la roue, il est possible de modifier le code pour que l'animation de fondu soit terminée (la valeur par défaut est complètement masquée). Je permets l'échange de l'image sur le fond div pour que le fondu disparaisse commence il y a une nouvelle image ci-dessous? Je suis relativement nouveau à JQuery et donc ce n'est pas ma force.

Heres la partie d'action du plug-in:

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; 

Et dans mon HTML:

<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

Vérifiez ma réponse à another question

Cela devrait faire l'affaire:

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() 
}); 

Check it out en action ici - http://jsfiddle.net/sfsPx/