jQuery Animacja, łańcuchowanie, .each() i .animate() (lub fadeIn() i fadeOut())

Question

Mam trochę problemów, próbując to zrozumieć dzisiaj, chcę zrobić 5 przedmiotów w środku mój DOM (który jest wymieniony pod tym samym elementem atrybutu, $ (". elements")) znika i znika, a po przeczytaniu trochę na temat API myślałem, że .each() byłoby świetnym pomysłem do implementacji zanikania w i znikną galerię prezentacyjną.

Jednakże obecnie używam:

$('.elements').each(function() { 
    $(this).fadeIn(2000).delay(200).fadeOut(2000).show(); 
}) 

ale wszystko się wyblakłe i obecnie naraz.

Jak zrobić efekt sekwencyjny, w którym wszystko jest połączone razem i zaczyna się od pierwszego elementu na liście (aka - $ ("elementy"). Eq (0)?) W dół do ostatniego, a następnie ponownie uruchamia się?

Czy naprawdę potrzebuję pętli while, aby zrobić to w javascript/jquery? Miałem nadzieję, że będzie podobna funkcja, którą mógłbym uruchomić dla jQuery, aby zmniejszyć obciążenie i rozmiar pliku.

Czy istnieje również sposób ograniczenia wyświetlania obrazów z mojego div?

Answer 1

(function loop() { 
    $('.elements').each(function() { 
    var $self = $(this); 
    $self.parent().queue(function (n) { 
     $self.fadeIn(2000).delay(200).fadeOut(2000, n); 
    }); 
    }).parent().promise().done(loop); 
}()); 

wersja demonstracyjna: http://jsfiddle.net/uWGVN/2/

Zaktualizowany aby mieć pętlę bez końca.

---

2-ty aktualizacja: inny, prawdopodobnie bardziej czytelne, podejście:

(function fade(idx) { 
    var $elements = $('.elements'); 
    $elements.eq(idx).fadeIn(2000).delay(200).fadeOut(2000, function() { 
    fade(idx + 1 < $elements.length ? idx + 1 : 0); 
    }); 
}(0)); 

demo: http://jsfiddle.net/uWGVN/3/

Answer 2

Możesz dodać zwrotnego

offical doc:

('#clickme').click(function() { 
    $('#book').fadeOut('slow', function() { 
    // Animation complete. 
    }); 
}); 

i wywołać tę samą funkcję z I ++ et $ (”Elementy). Eq (I)

http://jsfiddle.net/dFnNL/

.

Answer 3

Dla przepełniona, to styl CSS:

div.(class) { position:relative; overflow:hidden; }