Довольно простые JQuery Animation-очереди, хотя и не работают - PullRequest
Новая
       25

Довольно простые JQuery Animation-очереди, хотя и не работают

1 голос
/ 11 февраля 2011

Итак, у меня появилась отличная (?) Идея создать собственную систему табуляции, поскольку ни один из скриптов, которые я пробовал, не работал так, как я надеялся.

У меня есть список со ссылками и пара div, которые для начала скрыты. Щелкните по LI, и все видимые элементы div будут скрыты, после чего выбранная ссылка / div исчезнет.

HTML 

<ul>
<li id="tab1">Link</li>
<li id="tab2">Link</li>
<li id="tab3">Link</li>
</ul>

<div id="tab1div">Content</div>
<div id="tab2div">Content</div>
<div id="tab3div">Content</div>

JS 

$('li').click(function(){

    $('div:visible').fadeOut(1000)
    .queue(function () {
        var id = $(this).attr('id');
        $('div#' + id + "div").fadeIn('slow');
        $(this).dequeue();
    });
});

Теперь проблема в анимации (кроме скрипта, который не работает). Я стремлюсь к fadeOut ('fast') для любого видимого DIV, затем к fadeIn ('slow') для выбранного li / div. В очереди, то есть.

Есть мысли?

1 Ответ

0 голосов
/ 11 февраля 2011

jQuery fadeOut может иметь два параметра, вторым является функция, вызываемая после завершения анимации, так что это, вероятно, то, что вы хотите: 

$('li').click(function(){
    var id = $(this).attr('id');
    $('div:visible').fadeOut(1000, function () {
        $('#' + id + "div").fadeIn('slow');
    });
});
...