如何使用 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/< /a>

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 Cycle。

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

Answer 4

使用each 方法将一次解析jQuery 集合中的每个元素，而不是使用隐式迭代。像这样：

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

.each()