关于这个话题有很多,但我找不到适合我情况的实例。
淡出图片,然后淡入另一张图片。相反,我遇到了一个问题,第一个淡出,然后立即(在动画完成之前)下一个淡入。
我读过一次,记不清到底是什么招。。
http://jsfiddle.net/danielredwood/gBw9j/
感谢您的帮助!
淡入另一个在淡入回调中,淡出完成后运行。使用您的代码:
$('#two, #three').hide();
$('.slide').click(function(){
var $this = $(this);
$this.fadeOut(function(){ $this.next().fadeIn(); });
});
或者,您可以“暂停”该链,但是需要指定多长时间:
$(this).fadeOut().next().delay(500).fadeIn();
在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();
});
});
这可能会帮助:http://jsfiddle.net/danielredwood/gBw9j/基本上$(this).fadeOut().next().fadeIn();
是您所需要的
有了异步功能和承诺,它现在可以像这样简单地工作:
async function foobar() {
await $("#example").fadeOut().promise();
doSomethingElse();
await $("#example").fadeIn().promise();
}