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 之后，使用 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();
  });
});