jquery-ui选项卡与fadeIn？

Question

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?

Answer 1

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

Answer 2

由于选项卡只是li元素，因此可以在第一次加载页面时将所有选项卡设置为不display:none吗？然后使用JQuery的Fade （ http://jqueryui.com/demos/effect/ ）效果分别淡化每个li元素在吗？

Answer 3

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!