jQuery(document).ready(function(){
$(".welcome").fadeOut(9500);
$(".freelance").fadeIn(10000);
$(".freelance").fadeOut(4500);
});
我希望欢迎消息慢慢淡出然后另一个div淡出它的位置然后fadeOut – 显然当欢迎盒不再存在时.
<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>
解决方法
您需要将回调函数内的附加fadeIn()和fadeOut调用到第一个. jQuery中的所有动画方法(以及许多其他方法)都允许回调：
jQuery(document).ready(function(){
$(".welcome").fadeOut(9500,function(){
$(".freelance").fadeIn(10000,function(){
$(".freelance").fadeOut(4500);
});
});
});
这将导致.欢迎首先淡出.一旦它完成淡出,.freelance将淡入.一旦它完成淡入,它将逐渐淡出.