JQuery-UI вкладки с FadeIn? - PullRequest
Новая
       6

JQuery-UI вкладки с FadeIn?

1 голос
/ 08 июля 2010

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

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

Можно ли это сделать, и если да, то как?

Ответы [ 3 ]

4 голосов
/ 23 июня 2012

Это произойдет, когда выбранная вкладка исчезнет, ​​и когда она отобразится, появится! 

$('.tabs').tabs({
        select: function(event, ui) {
            $(ui.panel).animate({opacity:0.1});
        },
        show: function(event, ui) {
            $(ui.panel).animate({opacity:1.0},1000);
        }
});
1 голос
/ 08 июля 2010

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

0 голосов
/ 08 июля 2010

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

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

...