jquery-ui选项卡与fadeIn？

我在页面加载时淡入的边栏中有一个小的JQuery选项卡窗口小部件，小心地将注意力引向本身以及选项卡后面的有趣内容。jquery-ui选项卡与fadeIn？

要建立在这个效果上，它可能是很好的，如果单个标签可以一个接一个地褪色。

可以这样做，如果是这样，如何？

来源

2010-07-07 Ken

由于标签只是li元素，你可以设置他们都display:none当你第一次加载页面，然后使用jQuery的Fade（http://jqueryui.com/demos/effect/）的影响在个别淡出每个li元素？

来源

2010-07-07 22:15:57 amfeng

只需在每个元素上列出调用fadeIn（“slow”），就可以同时淡入。我不知道如何控制时间，以便延迟元素的淡入时间，直到前一个元素完成。 – Ken 2010-07-07 22:41:56

这样做可能很麻烦，可能是使用fadeIn的回调函数并使用嵌套的fadeIn。直到动画完成后才会调用回调，因此每次连续的fadeIn都不会被调用，直到前一个完成。另一个（可能是凌乱的）选项是使用某种Javascript sleep（）定时器。 – amfeng 2010-07-07 22:49:33

回调想法听起来不错。凌乱的方式。明天再试 - 现在是凌晨1点。谢谢！ – Ken 2010-07-07 23:05:25

，我发现我的问题在这里的讨论：http://p.karageorgakis.com/blog/jquery_simulating_a_delay_function_between_fade_in_out_effects/

其中提出的解决方案，setTimeout()压倒其他的解决方案，至少对于我的目的的JavaScript。

这里是我去的代码：

$(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-08 19:59:51 Ken

这将使选择标签消失，当它显示出现！

$('.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-23 02:07:48

非常好的代码人工作非常好，为FADEIN效果 – Rami 2012-09-04 11:26:21

jquery-ui选项卡与fadeIn？

回答

相关问题