jQuery se desvanece y se desvanece en

Question

Hay un montón sobre este tema, pero no he encontrado una instancia que se adapte bien a mi situación.

Fundido una imagen y luego se desvanecen otra imagen. En su lugar, estoy corriendo en un problema por el que el primero se desvanece e inmediatamente (antes de que termine la animación) en los próximos desvanece.

He leído sobre esto una vez y no puede recordar exactamente lo que era el truco ..

http://jsfiddle.net/danielredwood/gBw9j/

gracias por su ayuda!

Answer 1

fundido el otro en la devolución de llamada de fadeout, que se ejecuta cuando fadeout se hace. Usando el código:

$('#two, #three').hide(); 
$('.slide').click(function(){ 
    var $this = $(this); 
    $this.fadeOut(function(){ $this.next().fadeIn(); }); 
}); 

lo prefiere, puede simplemente "pausa" de la cadena, pero hay que especificar por cuánto tiempo:

$(this).fadeOut().next().delay(500).fadeIn(); 

Answer 2

Esto podría ayudar: http://jsfiddle.net/danielredwood/gBw9j/
Básicamente $(this).fadeOut().next().fadeIn(); es lo que requiere

Answer 3

Después de jQuery 1.6, usar promesa parece una mejor opción.

var $div1 = $('#div1'); 
var fadeOutDone = $div1.fadeOut().promise(); 
// do your logic here, e.g.fetch your 2nd image url 
$.get('secondimageinfo.json').done(function(data){ 
    fadeoOutDone.then(function(){ 
    $div1.html('<img src="' + data.secondImgUrl + '" alt="'data.secondImgAlt'">'); 
    $div1.fadeIn(); 
    }); 
});