Разрыв цикла, когда пользователь нажимает на новую вкладку - jQuery Tabs

Question

Я работаю над навигацией по вкладкам для своего веб-сайта, и у меня есть проблема, которую я хотел бы исправить.

Я весь день карабкалась головой и никуда не деться. Был бы очень признателен за помощь.

Здесь будет код: http://jsfiddle.net/EghAt/

1) Обратите внимание, когда вы нажимаете Tab 1 , а затем сразу же нажимаете Tab 2 , Tab 1 продолжает зацикливать все результаты. Я бы предпочел, чтобы это прекратило зацикливание Tab 1 результатов и просто началось зацикливание Tab 2 результатов.

Возможно ли это?

Как мне этого добиться?

Большое спасибо за любые указатели

Answer 1

Проблема здесь.

$(this).delay(i * 400).fadeToggle('slow')

Вы даете эффект федерации каждому элементу одновременно, увеличивая задержку.

Нелегко это остановить. Правильный способ сделать это состоит в том, чтобы вызвать функцию, которая будет только исчезать элемент за один раз. Затем эта функция будет выполнена снова через заданный интервал времени (400 в вашем случае), и исчезнет следующий элемент.

Таким образом, передача переменной функции, например, stopExecuting=true, остановит эффекты.

Взгляните на setInterval и setTimeout, чтобы достичь этого.

Answer 2

Вы можете остановить предыдущую анимацию в этой вашей функции, добавив .stop(true, true), который вы видите в этой пересмотренной функции:

function fadeOutItems(ele, delay) {
    var $$ = $(ele), $n = $$.next();

    // Toggle the active class
    $$.toggleClass('active');

    // Ensure the next element exists and has the correct nodeType
    // of an unordered list aka "UL"
    if ($n.length && $n[0].nodeName === 'UL') {
        $('li', $n).each(function(i) {
            // Determine whether to use a fade effect or a very quick
            // sliding effect
            delay ? $(this).stop(true, true).delay(i * 400).fadeToggle('slow') : $(this).stop(true, true).slideToggle('fast');
        });
    }
}

Поскольку вы вызываете это как на активной в данный момент вкладке, так и на новойактивная вкладка, это должно остановить анимацию на текущей активной вкладке.

Подробнее см. документ jQuery по .stop () .

Просмотр этого кодакроме того, я считаю, что он делает то, что вы буквально просили в своем вопросе (он останавливает цикл предыдущей вкладки и запускает следующую вкладку), но я не уверен, что это действительно то, что вы хотите, потому что оставляет элементы на вкладке только частично раскрыт,Если это то, что вы хотите, то это будет сделано.

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

Как я и подозревал, вы на самом деле хотите больше, чем просили (согласно вашим последним комментариям).Вы хотите, чтобы предыдущие элементы были скрыты, независимо от того, в каком состоянии они были ранее.Вы можете сделать это с помощью этого кода, где я изменил slideToggle() на slideUp().Вы не можете использовать любую форму переключения, если анимация еще не началась, потому что переключение будет идти в неправильном направлении (оно просто меняет состояние).Вместо этого, когда вы прячетесь, вы должны использовать определенную анимацию, которая заканчивается невидимым элементом.Вы можете использовать этот код там, где я использовал slideUp(), но вы можете выбрать что-то другое, если хотите:

// A helper function that allows multiple LI elements to be either
// faded in or out or slide toggled up and down
function fadeOutItems(ele, show) {
    var $$ = $(ele), $n = $$.next();

    // Toggle the active class
    $$.toggleClass('active');

    // Ensure the next element exists and has the correct nodeType
    // of an unordered list aka "UL"
    if ($n.length && $n[0].nodeName === 'UL') {
        $('li', $n).each(function(i) {
            // Determine whether to use a fade effect or a very quick
            // sliding effect
            show ? $(this).stop(true, true).delay(i * 400).fadeToggle('slow') : $(this).stop(true, true).slideUp('fast');
        });
    }
}

Вы можете увидеть это в действии здесь: http://jsfiddle.net/jfriend00/rzd3N/.