jquery FadeIn 在 FadeOut 前一个 div 之后的一个元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7539199/
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 FadeIn one element after FadeOut the previous div?
提问by TheBlackBenzKid
jQuery(document).ready(function(){
$(".welcome").fadeOut(9500);
$(".freelance").fadeIn(10000);
$(".freelance").fadeOut(4500);
});
I want the welcome message to fadeOut slowly and then the other div to fadeIn its place and then fadeOut - obviously when the welcome box no longer exists.
我希望欢迎消息慢慢淡出，然后另一个 div 淡出它的位置，然后淡出 - 显然当欢迎框不再存在时。
<header>
<h1 class="left"><a href="index.html"></a></h1>
<div class="left yellowbox welcome"><p>Welcome to my portfolio.</p></div>
<div class="left greenbox freelance"><p>I am currently available for for work, contact me below.</p></div>
</header>
回答by maxedison
You need to call the additional fadeIn()and fadeOutinside of a callback function to the first one. All animation methods (and many others) in jQuery allow for callbacks:
您需要调用第一个回调函数的附加fadeIn()和fadeOut内部。jQuery 中的所有动画方法（以及许多其他方法）都允许回调：
jQuery(document).ready(function(){
$(".welcome").fadeOut(9500,function(){
$(".freelance").fadeIn(10000, function(){
$(".freelance").fadeOut(4500);
});
});
});
This will cause .welcometo fade out first. Once it's done fading out, .freelancewill fade in. Once it's done fading in, it will then fade out.
这将导致.welcome首先淡出。一旦完成淡出，.freelance就会淡入。一旦完成淡入，它就会淡出。
回答by Joakim
jQuery(document).ready(function(){
$(".welcome").fadeOut(9500, function() {
$(".freelance").fadeIn(500, function () {
$(".freelance").fadeOut(4500);
});
});
});
回答by genesis
You probably want .delay()
你可能想要 .delay()
jQuery(document).ready(function(){
$(".welcome").delay(9000).fadeOut(9500);
$(".freelance").delay(10000).fadeIn(10000);
$(".freelance").delay(145000).fadeOut(4500);
});
回答by jwchang
I believe that this code might work
我相信这段代码可能有效
$(".welcome").fadeOut(9500).queue(function(next) {
$(".freelance").fadeIn(10000).queue(function(next) {
$(".freelance").fadeOut(4500);
});
});
