Как анимировать список элементов с помощью jQuery?

Question

У меня есть список автомобилей, которые я бы хотел оживить.

<li id="toyota">
    <img class="car" src="img/toyota.png">
</li>
<li id="honda">
    <img class="car" src="img/honda.png">
</li>
<li id="ford">
    <img class="car" src="img/ford.png">
</li>

Я предполагаю, что мне придется хранить их в массиве, а затем перебирать их?

Я довольно новичок в jQuery / JS, но я вроде понимаю концепции. Я хочу анимировать каждую машину, чтобы одна появлялась за другой. Как то так:

$('.car').fadeIn(1000, function(){
    $('.car').fadeOut(1000);
});

Спасибо!

Answer 1

var delay = 100;
// iterate through each li element and run a method
$('li').each(function (index, el) {
    $(el).delay(delay * index).fadeIn(1000, function (){
        $(this).fadeOut(1000);
    });
});

Если вы ищете тип интерактивного слайд-шоу, проверьте: http://jquery.malsup.com/cycle/

Answer 2

Попробуйте следующее:

var cars = $('.car');
var index = 0;
var loop = function() {
  var car = $(cars[index]);
  car.fadeIn(1000, function() {
    car.fadeOut(1000, function() {
      index = index + 1 < cars.length ? index + 1 : 0;
      loop();
    });
  });
};
loop();

Это исчезнет в автомобиле, затем исчезнет, ​​как только оно исчезнет, ​​оно исчезнет в следующей машине, снова продолжая движение к первой машине.

Answer 3

Использование каждого метода будет анализировать каждый элемент в коллекции jQuery по одному вместо использования неявной итерации.Вот так:

$(".car").each(function() {
    $(this).fadeOut(1000);
});

.each ()

Answer 4

Думаю, вам стоит взглянуть на jQuery Cycle.

http://jquery.malsup.com/cycle/