Search code examples
jqueryjquery-uijquery-tabs

jQuery Tabs fx on page load

I'm trying to figure out out to animate the tabs loading using jQuery UI. I have the animation working when switching between tabs, but can't seem to find the information on how to make it work on page load.

Current code....

<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>
}

I've included the MVC3 code just in case although I don't believe it should have an affect.

Can someone point me in the direction of how to do this or if it's even possible with the existing abilities of jquery/jqueryUI/tabs?

Solution

  • Currently I doubt there's option available to achieve this. So a workaround may be to use css to hide the original tab before initialization using display:none, and then add animation to show the generated tab using the tabs create event.

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

    Example here http://jsfiddle.net/Quincy/ZA56n/2/