jQuery 淡出然后淡入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6287308/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery fade out then fade in
提问by technopeasant
There's a bunch on this topic, but I havn't found an instance that applies well to my situation.
关于这个主题有很多，但我还没有找到适合我的情况的实例。
Fade a picture out and then fade another picture in. Instead, I'm running into an issue where the first fades out and immediately (before the animation is finished) the next fades in.
淡出一张图片，然后淡入另一张图片。相反，我遇到了第一个淡出并且立即（在动画完成之前）下一个淡入的问题。
I read about this once and can't remember exactly what the trick was..
我读过一次，不记得究竟是什么伎俩了..
http://jsfiddle.net/danielredwood/gBw9j/
http://jsfiddle.net/danielredwood/gBw9j/
thanks for your help!
感谢您的帮助！
回答by Mark Kahn
fade the other in in the callback of fadeout, which runs when fadeout is done. Using your code:
在淡出的回调中淡入另一个，淡出完成时运行。使用您的代码：
$('#two, #three').hide();
$('.slide').click(function(){
var $this = $(this);
$this.fadeOut(function(){ $this.next().fadeIn(); });
});
alternatively, you can just "pause" the chain, but you need to specify for how long:
或者，您可以“暂停”链，但您需要指定多长时间：
$(this).fadeOut().next().delay(500).fadeIn();
回答by rabbit.aaron
After jQuery 1.6, using promise seems like a better option.
在 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();
});
});
回答by rabbit.aaron
This might help: http://jsfiddle.net/danielredwood/gBw9j/
Basically $(this).fadeOut().next().fadeIn();is what you require
这可能会有所帮助：http: //jsfiddle.net/danielredwood/gBw9j/
基本上$(this).fadeOut().next().fadeIn();就是你所需要的
回答by Flimm
With async functions and promises, it now can work as simply as this:
使用异步函数和承诺，它现在可以像这样简单地工作：
async function foobar() {
await $("#example").fadeOut().promise();
doSomethingElse();
await $("#example").fadeIn().promise();
}
