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？

回答

相關問題