jquery-ui选项卡与fadeIn？

Question

我在边栏中有一个小的“ JQuery Tabs”小部件，该小部件在页面加载时逐渐淡入，谨慎地引起对自身的关注以及这些标签后面的有趣内容。

要建立这种效果，最好是各个选项卡可以一个接一个地淡入淡出。

可以做到吗？如果可以，怎么做？

Answer 1

选择消失的选项卡，并在其显示时，这将使它出现！

$('.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

我在这里找到了关于我的问题的讨论： http : //p.karageorgakis.com/blog/jquery_simulating_a_delay_function_between_fade_in_out_effects/

在提出的解决方案中，javascript setTimeout()胜过其他解决方案，至少出于我的目的。

这是我使用的代码：

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

选项卡小部件本身以及列表项都一开始就设置为display:none 。

我将分享另一个问题，因为它使我找到了不错的淡入淡出解决方案。

这个小部件需要浮动到其他一些内容的左侧，但也需要隐藏，直到被JQuery完全实例化为止。 fadeIn()不适用于设置为fadeIn() visibility:hidden的元素； 它必须是display:none ，但是这导致小部件替换周围的内容并突然出现，这看起来确实很糟糕。 淡入是减轻这种情况的一种方法。

回想起来，也许我可以阻止选项卡小部件的（已知）尺寸，无论如何，我都喜欢得到的结果！