Цикл через div с jQuery

Я пытаюсь заставить эти div исчезать при нажатии стрелки (как очень простое слайд-шоу). Я могу сделать так, чтобы они исчезали один за другим, вот так:

$(document).ready(function(){
    $('li').click(function(){
        $(this).fadeOut();
    });
});

JSFIDDLE

Однако это не позволит мне

  • Прокрутите (так что начните снова, когда все исчезнет)
  • Это не будет работать, когда нажимается другой класс

Есть ли метод jQuery, который может перебирать каждый <li> и fadeOut. Если это последний li, запустить последовательность заново?


javascript loops jquery fadeout
person Community    schedule 25.07.2013    source источник
comment
Что вы имеете в виду под «это не будет работать, когда нажимается другой класс»? И еще один вопрос: после каждого щелчка проверяйте, сколько li все еще видно, если ни одного, то пусть они все снова исчезают.   -  person putvande    schedule 25.07.2013

Ответы (1)


arrow_upward
3
arrow_downward

Это то, что тебе надо? http://jsfiddle.net/x3buT/39/

Здесь я затемняю первый слайд, затем перемещаю его в конец строки и затемняю следующий.

$(document).ready(function(){
    $('.slide:not(:first)').hide();
    //If you only need to change with the arrow, remove .slide from next line
    $('.slide,.arrow').click(function(){
        $('.slide').first().fadeOut(function(){
            $(this).next().fadeIn();
            $(this).appendTo('.inner');
        });
        return false;
    });
});
person Omar    schedule 25.07.2013
comment
+1. Судя по его первоначальному решению, я бы добавил li к $('.slide'), чтобы $('.slide, li') сохранял и стрелку, и обработчик кликов li. - person Don Boots; 25.07.2013
comment
@DonBoots Верно, но я думаю, вы имеете в виду $('.slide, .arrow').click(...), что заставило бы слайд измениться при нажатии. - person Omar; 25.07.2013
comment
Спасибо. Является ли .slides:not(:first) атрибутом css, похожим на nth-child(1)? - person ; 26.07.2013
comment
@TomJulianHume Не совсем, почитайте документы для :first selector. Он возвращает первый элемент в списке совпадающих элементов, в то время как nth-child css может возвращать несколько элементов, все из которых являются первыми прямыми потомками их родителя. - person Omar; 26.07.2013
comment
Вы были действительно великолепны, спасибо. Однако я должен спросить, почему (:first) находится в скобках? Почему бы не $('слайд:не:первый')? - person ; 26.07.2013
comment
Это связано с тем, что из-за :синтаксиса селектора not вы должны использовать круглые скобки, чтобы указать селектор, который элементы НЕ должны совпадать, в этом случае мы используем :first. Таким образом, в основном это находит все слайды, а затем удаляет те, которые соответствуют :first (только первый), так что мы получаем все слайды, кроме первого. - person Omar; 26.07.2013