Problema al mostrar/ocultar divs

Question

Estoy tratando de mostrar algunas imágenes aleatorias en un div. Mi código HTML es así:

<div class="sponsors"> 
<div id="sponsorsContent"> 
    <div class="spacer"></div> 
    <div class="sponsorSlide" id="imgageSlide_1"> 
     <img alt="" src="<?php echo $this->baseUrl(); ?>/img/Sponsors/img_1.jpg" /><br /> 
     <span class="thumbnail-text">Image Text</span> 
    </div> 
    <div class="spacer"></div> 
    <div class="sponsorSlide" id="imgageSlide_2"> 
     <img alt="" src="<?php echo $this->baseUrl(); ?>/img/Sponsors/img_2.jpg" /><br /> 
     <span class="thumbnail-text">Image Text</span> 
    </div> ... </div></div> 

Estoy tratando de primer orden aleatorio divs "sponsorSlide" y luego seleccione 7 de ellos al azar. Quiero mostrarlo con fadeIn y fadeOut. En general, estoy tratando este código:

$('#sponsorsContent').addClass('horizontal'); 
$('#sponsorsContent div').addClass('hidden').removeClass('visible'); 
$('#sponsorsContent .sponsorSlide').rand(7).removeClass('hidden'); 
setInterval(function(){ 
    $('#sponsorsContent').fadeOut(500); 
    $('#sponsorsContent .sponsorSlide').delay(500).addClass('hidden').removeClass('visible').shuffle(); 
    $('#sponsorsContent .sponsorSlide').rand(7).removeClass('hidden').addClass('visible');     
    $('#sponsorsContent').fadeIn(1500); 
}, 5000); 

El principal problema es que, cuando se ejecuta el código, exactamente antes de la div se desvanece, se puede ver que las imágenes están cambiando! ¡Pero quiero aleatorizarlos cuando no son visibles! que utilizan diferentes maneras:

• retraso en diferentes posiciones y diferentes partes
• Uso addClass ("bla", 500)!
• Mostrar (500)/Ocultar (500)
• fadeIn/fadeOut la "sponsorSlide"

FYI, estoy tratando de tener este concepto:

1- mostrando algunas imágenes aleatorias 2 - fade out 3- imágenes de reproducción aleatoria 4- Seleccione 7 divs azar 5- fundido de entrada 6- ir 2

¿alguien tiene alguna idea de que lo que es mi principal error? ¿Estoy haciendo algo de manera incorrecta? Me confundí y realmente quiero saber qué camino debo probar y cómo puedo lograr que funcione como quiero.

pd: ¡Funciona sin desvanecimientos! Pero necesito desvanecerlos dentro y fuera.

Answer 1

Debe utilizar una función de devolución de llamada para evitar que se muestre el cambio. Si desea ocultar -> Cambio -> show, debe hacerlo de esta manera:

$('#image_div').fadeOut(500, function() { //first fade out! 
    $('#image_div img').attr('src', 'image.jpg'); //only then change the picture 
    $('#image_div').fadeIn(500); //and fade in 
}); 

Lo que viene en el function(){//code} sólo ocurrirá cuando el fadeOut() ha terminado.