使用基本jQuery選項卡FadeIn/FadeOut小故障

Question

我正在使用簡單的fadeIn/fadeOut選項卡系統使用jQuery，但它不像我希望的那樣流暢，只有。

這裏是我的DEMO給你看它在行動。

看看演示。我預計它會彼此淡入淡出，但如果您點擊了選項卡1>選項卡2>選項卡3然後返回選項卡1，沿途會出現奇怪的淡入/淡出故障。

任何想法如何解決這個問題？ 我jQuery的是：

$(document).ready(function(){ 

     $('ul.tabs').each(function(){ 

      var $active, $content, $links = $(this).find('a'); 

      $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]); 
      $active.addClass('active'); 
      $content = $($active.attr('href')); 

      $links.not($active).each(function() { 
       $($(this).attr('href')).hide(); 
      }); 

      $(this).on('click', 'a', function(e){ 

       $active.removeClass('active'); 
       $content.fadeOut("slow"); 

       $active = $(this); 
       $content = $($(this).attr('href')); 

       $active.addClass('active'); 
       $content.fadeIn("slow"); 

       e.preventDefault(); 
      }); 
     }); 

    }); 

和我HTML是：

<ul class="tabs"> 
    <li><a href="#tab1">Overview</a></li> 
    <li><a href="#tab2">Sub Nav 2</a></li> 
    <li><a href="#tab3">Sub Nav 3</a></li> 
</ul> 

<div id="tab1"> 
    <p>this is a test 1</p> 
</div> 
<div id="tab2"> 
    <p>this is a test 2</p> 
</div> 
<div id="tab3"> 
    <p>this is a test 3</p> 
</div> 

爲:-)

Answer 1

您需要在代碼完成淡出後再回撥代碼。目前代碼將在淡出完成之前執行淡入。爲了級聯呼叫，您可以提供一個功能作爲fadeOut的第二個參數。該函數在函數完成動畫後立即調用。在我的情況下，我提供了一個匿名函數來完成剩餘的代碼。

$content.fadeOut("slow", function() 
           { 
            $active = $(c); 
            $content = $($(c).attr('href')); 

            $active.addClass('active'); 
            $content.fadeIn("slow"); 
           }); 

我更新了你的小提琴。用正確的代碼修改。

http://jsfiddle.net/R8yQV/

Answer 2

任何指針非常感謝如果你希望他們淡入和淡出的那麼你必須將它們放在彼此的頂部。否則，它們會在文檔的正常流程中彼此相鄰，這樣您會看到新項目開始時出現的奇怪外觀行爲，然後當消失項目最終設置爲display: none時滑向左側。嘗試使用position: absolute將物品放置在彼此之上。然後淡入/淡出應該做你想要的。

Answer 3

，而不是在你的jsfiddle的CSS div {float:left;}，使用div{position:absolute;} http://jsfiddle.net/j4eFE/11/

使用這個你淡入淡出，並會同時發生，並且會顯得很流暢。