Преминаване през div с jQuery

Опитвам се да накарам тези divs да избледняват, когато се щракне върху стрелката (като много просто слайдшоу). Мога да ги накарам да изчезнат, един по един, така:

$(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 селектор. Той връща първия елемент в списъка със съвпадащи елементи, докато n-тото дете на css може да върне множество елементи, всички които са първите директни наследници на техния родител - person Omar; 26.07.2013
comment
Бяхте наистина страхотни, благодаря ви. Трябва да попитам обаче, защо (:first) е в скоби? Защо не $('slide:not:first')? - person ; 26.07.2013
comment
Това е така, защото :not селектор синтаксис трябва да използвате скоби, за да предоставите селектора, който вашия елементите НЕ трябва да съвпадат, в този случай използваме :first. Така че основно това, което прави това, е да намери всички слайдове, след което да премахне тези, които съответстват на :first (само първия), така че в крайна сметка имаме всички слайдове освен първия - person Omar; 26.07.2013