jquery - sobre - texto al pasar el mouse por una imagen

jQuery se desvanece y luego se desvanece

Question

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

Fundir una imagen y luego fundir otra imagen. En su lugar, me encuentro con un problema en el que la primera se desvanece e inmediatamente (antes de que termine la animación) la siguiente se desvanece.

Leí sobre esto una vez y no recuerdo exactamente cuál fue el truco.

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

¡gracias por tu ayuda!

Answer 1

Después de jQuery 1.6, usar promesa parece ser 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();
  });
});

Answer 2

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

Answer 3

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

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

alternativamente, puede simplemente "pausar" la cadena, pero necesita especificar por cuánto tiempo:

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