Question

我在div容器中有一些div项目，我想继续为它们制作动画。

我知道如何在无限循环中运行我的函数，但选择第一个div，动画并在完成动画后将其移动到最后会出现问题。

我的功能如下：

function MoveItems() {
        $(".container:first").animate(
            {width: "0px"},
            1000,
            function (){ 
                $('.container').append($(this));
                $('.container').remove($(this));
            }
        );
};

我做错了什么？ ; /

修改

你是正确的删除，但动画仍然无法正常工作。

我认为选择器不能正常工作。

我的HTML是：

<div class="container">
<div class="image"><a href=""><img src="img/image001.jpg" /><span>IMAGE001</span></a></div>
<div class="image"><a href=""><img src="img/image002.jpg" /><span>IMAGE002</span></a></div>
<div class="image"><a href=""><img src="img/image003.jpg" /><span>IMAGE003</span></a></div>
  <div class="image"><a href=""><img src="img/image004.jpg" /><span>IMAGE004</span></a></div>
</div>

但是在运行函数MoveItems之后：

<div class="container" style="width: 0px; overflow: hidden;">
    <div class="image"><a href=""><img src="img/image001.jpg"><span>IMAGE001</span></a></div>
    <div class="image"><a href=""><img src="img/image002.jpg"><span>IMAGE002</span></a></div>
    <div class="image"><a href=""><img src="img/image003.jpg"><span>IMAGE003</span></a></div>
    <div class="image"><a href=""><img src="img/image004.jpg"><span>IMAGE004</span></a></div>
</div>

因此函数在.container上运行而不是容器的第一个子节点。我在这里更具体吗？：）

Answer 1

$(".container:first")选择它找到的第一个.container。

您想要$(".container>div:first")

您还可以通过操作父级来“加速”最终删除/追加，而不是对.container进行另一次DOM搜索：

var $me = $(this);
$me.parent().append($me);

Answer 2

append会自动将父项从父项中删除，并将其放在最后。 remove会再次移除孩子，而不会重新添加。

只需删除该行：$('.container').remove($(this));

Answer 3

删除此行：

$('.container').remove($(this));

append（）不会创建副本，它会将所选对象从当前位置移动到目标的末尾。

Answer 4

这是一个更实际的例子：http://jsfiddle.net/8KyCD/1/

它创建了一个jQuery插件，以便您可以为任何元素上的项目设置动画。我没有把它设置为循环，因为你说你已经知道如何做到这一点;）

编辑：这是另一个隐藏元素，然后显示并永久重复的示例：http://jsfiddle.net/8KyCD/5/ (documented code)

如何将第一个孩子移到最后？

4 个答案: