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

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

Answer 4

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

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

.each()

如何使用jQuery动画显示元素列表？

4 个答案: