jQuery 淡出然后淡入

Question

关于这个主题有很多，但我还没有找到适合我的情况的实例。

淡出一张图片，然后淡入另一张图片。相反，我遇到了一个问题，第一张图片淡出，然后立即（在动画完成之前）下一张图片淡入。

我读过一次，但记不清了诀窍是什么..

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

感谢您的帮助！

Answer 1

在淡出的回调中淡入另一个，该回调在淡出完成时运行。使用您的代码：

$('#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 之后，使用 Promise 似乎是一个更好的选择。

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(); 就是您所需要的

Answer 4

有了异步函数和承诺，它现在可以像这样简单地工作：

async function foobar() {
  await $("#example").fadeOut().promise();
  doSomethingElse();
  await $("#example").fadeIn().promise();
}