jquery-ui tabs with fadeIn?

I have a small JQuery Tabs widget in a sidebar that fades in when the page 开发者_运维知识库loads, discreetly calling attention to itself and the interesting content behind the tabs.

To build on this effect it might be nice if the individual tabs could fade in one after the other.

Can this be done, and if so, how?

This will make when select the tab desappear, and when it is shown appear!

$('.tabs').tabs({
        select: function(event, ui) {
            $(ui.panel).animate({opacity:0.1});
        },
        show: function(event, ui) {
            $(ui.panel).animate({opacity:1.0},1000);
        }
});

Since the tabs are just li elements, can you set all of them to display:none when you first load the page, and then use JQuery's Fade (http://jqueryui.com/demos/effect/) effect to individually fade each li element in?

I found a discussion of my problem here: http://p.karageorgakis.com/blog/jquery_simulating_a_delay_function_between_fade_in_out_effects/

Among the solutions proposed, the javascript setTimeout() trumped the other solutions, at least for my purpose.

Here is the code I went with:

$(function() {
    $("#tabs").tabs();
    $("#tabs").fadeIn(500);
    $("#li1").fadeIn(500);
    setTimeout('$("#li2").fadeIn(500)', 300);
    setTimeout('$("#li3").fadeIn(500)', 600);
    setTimeout('$("#li4").fadeIn(500)', 900);
});

The tabs widget itself as well as the list items are all set to display:none at the outset.

There was another issue that I will share, because it led me to the nice fade solution.

This widget needed to float to the left of some other content, but also needed to be hidden until fully instantiated by JQuery. fadeIn() wasn't working with an element set to visibility:hidden; it had to be display:none, but this caused the widget to displace the surrounding content and appear abruptly, which looked really awful. Fading in was a way to mitigate that.

In retrospect, maybe I could block off the (known) dimensions of the tabs widget, anyway I like the result I got!