jquery-ui вкладки с fadeIn?

Question

У меня есть небольшой виджет JQuery Tabs на боковой панели, который исчезает, когда страница загружается, незаметно обращая внимание на себя и интересный контент за вкладками.

Чтобы использовать этот эффект, может быть приятно, если отдельные вкладки могут затухать один за другим.

Это можно сделать, и если да, то как?

Answer 1

Поскольку вкладки только li элементы, вы можете установить их все display:none при первой загрузке страницы, а затем использовать Fade (http://jqueryui.com/demos/effect/) эффект Jquery по отдельности исчезают каждый li элемент?

Answer 2

Я нашел обсуждение моей проблемы здесь: 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() не работал с элементом, установленным на visibility:hidden; это должно было быть display:none, но это заставило виджет смещать окружающий контент и появляться внезапно, что выглядело действительно ужасно. Угасание было способом смягчить это.

Оглядываясь назад, возможно, я мог бы заблокировать (известные) размеры виджета вкладки, так или иначе мне нравится результат, который я получил!

Answer 3

Это сделает, когда выберете вкладку desappear, и когда она появится, появится!

$('.tabs').tabs({ 
     select: function(event, ui) { 
      $(ui.panel).animate({opacity:0.1}); 
     }, 
     show: function(event, ui) { 
      $(ui.panel).animate({opacity:1.0},1000); 
     } 
});