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

Question

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

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

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

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

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

Answer 1

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

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

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

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

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

Answer 3

Это может помочь: http://jsfiddle.net/danielredwood/gBw9j/
В основном $(this).fadeOut().next().fadeIn(); - это то, что вам нужно