页面加载时的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/