jQuery fade out y fade in

Question

jQuery fade out y fade in

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

Difumina una imagen y luego difumina otra imagen. En su lugar, me estoy topando 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 puedo recordar exactamente cuál era el truco..

Http://jsfiddle.net/danielredwood/gBw9j /

Gracias por su ayuda!

30

jquery fadein fadeout

Author: technopeasant, 2011-06-09

Source

3 answers

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

4

Author: rabbit.aaron,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-12-23 01:37:59

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

3

Author: Dr1Ku,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-12-12 12:18:30

score 72 · Accepted Answer

Fade the other in en la devolución de llamada de fadeout, que se ejecuta cuando se realiza fadeout. Usando su código:

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

Alternativamente, puede simplemente "pausar" la cadena, pero debe especificar por cuánto tiempo:

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