JQuery исчезает, затем исчезает

В этом разделе есть куча, но я не нашел экземпляр, который хорошо подходит для моей ситуации.

Измените изображение, а затем затушевите другое изображение. Вместо этого у меня возникает проблема, когда первое исчезает и сразу (до завершения анимации) следующее исчезает.

Я читал об этом один раз и не могу точно запомнить, что это за трюк.

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

спасибо за вашу помощь!

Ответы

Ответ 1

затухает другое в обратном вызове fadeout, который запускается при завершении fadeout. Использование вашего кода:

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

вы можете просто "приостановить" цепочку, но вам нужно указать, как долго:

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

Ответ 2

После jQuery 1.6 использование обещания кажется лучшим вариантом.

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();
  });
});