Question

我无法设置动画列表作为我正在制作的旋转木马的一部分。这是代码：

HTML：

<ul>
<li>no 1</li>
<li>no 2</li>
<li>no 3</li>
<li>no 4</li>
</ul>

jQuery的：

$('ul li').animate({left: '-=100', 1000, function(){

  $('ul li').eq(0).appendTo('ul');

});

动画完成后，回调函数应该采用第一个列表项并将其附加到列表的末尾。

但是出于某种原因，$('ul li').eq(0)会返回所有4个列表项，而不仅仅是第一个列表项（这是我所期待的）。如果我将这一行放在.animate()函数之外，它只返回第一个列表项，但是我需要在动画完成后执行它，这就是它在回调函数中的原因。

为什么会发生这种情况的任何想法？整天都把头发撕成了一片！

Answer 1

对于每个<li>，回调都会被触发，所以这就是为什么你得到它4次（好吧你会得到它的数量<li>项目的数量。）

执行此操作的方法是使<li>项向左浮动并使<ul>容器成为块。然后，不是为每个<li>设置动画，而是为整个<ul>设置动画。这样，动画只会被触发一次，回调将正确发生。

Answer 2

来自文档：

如果动画了多个元素，那么每次匹配都会执行一次回调元素，不是动画的一次一个整体。

如果您不想为ul设置动画，则可以使用JS中的解决方法：

var itemsToAnimate = $('ul li');
var callbackCount = itemsToAnimate.length;

itemsToAnimate.animate({left: '-=100'}, 1000, function(){

    if(--callbackCount > 0)
        return;

    $('ul li').eq(0).appendTo('ul');

});

Answer 3

我可以在您的脚本中看到一些问题：

您正在启动四个动画，因此您的回调将被调用四次
给我.appendTo（'ul'）似乎错了，因为函数接受jquery对象而不是字符串，所以它应该是.appendTo（$（'ul'））

确保您正在按原样运行动画。

Answer 4

这是因为您正在调用所有li项的动画，这意味着complete函数被调用了4次，所以看起来它正在返回4个列表项。如果你这样做this它会起作用。

jquery .animate（）函数和.eq（）的问题

4 个答案: