jquery Fade在FadeOut之前的div之後的一個元素？

jQuery(document).ready(function(){ 
    $(".welcome").fadeOut(9500); 
    $(".freelance").fadeIn(10000); 
    $(".freelance").fadeOut(4500); 
});

我希望歡迎消息慢慢地淡出，然後另一個div淡出它的位置，然後淡出 - 顯然當歡迎框不再存在時。jquery Fade在FadeOut之前的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>

來源

2011-09-24 TheBlackBenzKid

問題是，兩個盒子同時出現，然後兩者都在同一時間淡出/ ish – TheBlackBenzKid

你需要調用的內部附加fadeIn()和fadeOut回調函數到第一個。 jQuery中的所有動畫方法（和許多其他的）允許回調：

jQuery(document).ready(function(){ 
    $(".welcome").fadeOut(9500,function(){ 
     $(".freelance").fadeIn(10000, function(){ 
      $(".freelance").fadeOut(4500); 
     }); 
    }); 
});

這將導致.welcome先淡出。一旦完成淡出，.freelance將淡入。淡入淡出後，淡出。

來源

2011-09-24 13:10:39 maxedison

我得到它通過隱藏它首先使用你的代碼的工作：「自由職業者」 jQuery的（文件）。就緒（函數（）{ \t $（）隱藏（）; \t $（「歡迎」）。 fadeOut（6500，function（）{（「。freelance」）。fadeIn（2500，function（）{$（「。freelance」）.fadeOut（4500）; }）; }）; }） ; – TheBlackBenzKid

謝謝你的解決方案。 – TheBlackBenzKid

你也可以在你的css中放置display：none for .freelance ... – maxedison

我相信，此代碼的工作

$(".welcome").fadeOut(9500).queue(function(next) { 
    $(".freelance").fadeIn(10000).queue(function(next) { 
     $(".freelance").fadeOut(4500); 
    }); 
});

來源

2011-09-24 13:08:49 InspiredJW

jQuery(document).ready(function(){ 
    $(".welcome").fadeOut(9500, function() { 
     $(".freelance").fadeIn(500, function() { 
      $(".freelance").fadeOut(4500); 
     }); 
    }); 
});

來源

2011-09-24 13:09:06 Joakim

幾乎是正確的，除非您需要將.freelance的fadeOut放在fadeIn調用的回調函數中.freelance 。您當前的代碼在同一時間內都會自動進入和退出。 – maxedison

@maxedison謝謝你，它仍然按照它的意思行事，無論如何編輯我的答案。 – Joakim

你可能想.delay（）

jQuery(document).ready(function(){ 
    $(".welcome").delay(9000).fadeOut(9500); 
    $(".freelance").delay(10000).fadeIn(10000); 
    $(".freelance").delay(145000).fadeOut(4500); 
});

來源

2011-09-24 13:09:16 genesis

jquery Fade在FadeOut之前的div之後的一個元素？

回答

相關問題