web-dev-qa-db-fra.com

jQuery fondu puis fondu

Il y a un tas sur ce sujet, mais je n'ai pas trouvé d'exemple qui s'applique bien à ma situation.

Fondu d'une image puis fondu d'une autre image. Au lieu de cela, je rencontre un problème où le premier fondu et immédiatement (avant la fin de l'animation) le prochain fondu.

J'ai lu à ce sujet une fois et je ne me souviens pas exactement de ce que c'était.

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

merci de votre aide!

31
technopeasant

fade l'autre dans le rappel de fadeout, qui s'exécute lorsque le fadeout est terminé. En utilisant votre code:

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

alternativement, vous pouvez simplement "suspendre" la chaîne, mais vous devez spécifier la durée:

$(this).fadeOut().next().delay(500).fadeIn();
76
Mark Kahn

Après jQuery 1.6, utiliser promesse semble être une meilleure option.

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
rabbit.aaron

Cela pourrait aider: http://jsfiddle.net/danielredwood/gBw9j/
Fondamentalement $(this).fadeOut().next().fadeIn(); est ce dont vous avez besoin

2
user2000962