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/

jQuery选项卡fx页面加载

1 个答案: