頁面加載時的jQuery標籤頁fx

Question

我想弄清楚使用jQuery UI加載標籤頁的動畫效果。在切換標籤時我有動畫工作，但似乎無法找到關於如何使其在頁面加載上工作的信息。

當前代碼....

<script type="text/javascript"> 
    $(window).load(function() { 
     $('#tabs').tabs({ 
      fx: { 
       height: "toggle", 
       duration: 1000 
      } 
     }); 
    }); 
    function changeTab(tabID) { 
     $('#tabs').tabs('select', tabID); 
    } 
</script> 
@if (ViewBag.SelectedTab != null) 
{ 
    <script type="text/javascript"> 
     $(window).load(function(){ 
      $('#tabs').delay(500).tabs('select', @(ViewBag.SelectedTab - 1)); 
      $('.Equalize').equalHeights(); 
     }); 
    </script> 
} 

我已經包括了以防萬一的MVC3代碼雖然我不認爲它應該有一個影響。

有人能指點我如何做到這一點，或者如果它甚至可能與現有的jquery/jqueryUI/tabs的能力？

Answer 1

目前我懷疑有可用的選項來實現這一點。 因此，一種解決方法可能是使用css在初始化之前使用display:none隱藏原始選項卡，然後使用選項卡create事件添加動畫以顯示生成的選項卡。

$("#tabs").tabs({ fx: { opacity: 'toggle' 
         },     
     create: function(event, ui) { 
      $(this).animate({opacity: 'toggle'},3000);    
     }     
}); 

例這裏 http://jsfiddle.net/Quincy/ZA56n/2/