1

我在侧边栏中有一个小的 JQuery Tabs 小部件，当页面加载时它会淡入淡出，谨慎地引起对自身和标签背后有趣内容的注意。

为了建立这种效果，如果各个选项卡可以一个接一个地淡入，那可能会很好。

可以做到这一点，如果可以，怎么做？

4

3 回答 3

6

这将使选择选项卡时消失，并且显示时出现！

$('.tabs').tabs({
        select: function(event, ui) {
            $(ui.panel).animate({opacity:0.1});
        },
        show: function(event, ui) {
            $(ui.panel).animate({opacity:1.0},1000);
        }
});
于 2012-06-23T02:07:48.430 回答
1

由于选项卡只是li元素，您是否可以display:none在首次加载页面时将它们全部设置为，然后使用 JQuery Fade（http://jqueryui.com/demos/effect/）效果单独淡入每个li元素？

于 2010-07-07T22:15:57.453 回答
0

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

在提出的解决方案中，javascriptsetTimeout()胜过其他解决方案，至少就我的目的而言。

这是我使用的代码：

$(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()没有使用设置为的元素visibility:hidden；它必须是display:none，但这会导致小部件取代周围的内容并突然出现，这看起来真的很糟糕。淡入是一种减轻这种情况的方法。

回想起来，也许我可以屏蔽标签小部件的（已知）尺寸，无论如何我喜欢我得到的结果！

于 2010-07-08T19:59:51.497 回答