如何将第一个子元素移动到末尾？

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进行操作，而不是对container的第一个子元素进行操作。我在这里更具体吗？ :)

- lucaste

---

请不需要删除以下链接：http://api.jquery.com/append/ - Répás

@repas，您可能已经发布为答案。 - kobe

哦，这不是一个答案，只是一个小问题，这是一个小回答 :D - Répás

Answer 1

$(".container:first") 选择第一个 .container 元素。

您需要使用 $(".container>div:first")

您也可以通过操作父元素而不是进行另一个 .container 的 DOM 搜索来 "加速" 最后的删除/添加：

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

- Brandon

---

Levi Morrison做了一堂课，但这是帮助我的函数的那行代码。谢谢。 - lucaste

Answer 2

append 会自动将子元素从父元素中移除，并将其放在末尾位置。remove 则会将子元素再次移除，而不会将其重新添加。

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

- zzzzBov

Answer 3

请删除此行：

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

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

- Dr.Molle

Answer 4

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

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

编辑：这里是另一个示例，它隐藏元素，然后显示它，并无限重复：http://jsfiddle.net/8KyCD/5/ (文档化代码)

- Levi Morrison

---

它很神奇，而且它能工作，但我并没有从中理解太多。我必须在鼠标悬停时停止动画，所以我应该使用我的循环。干得好，伙计！这个JSFiddle真是一个伟大的工具。 - lucaste

我会加上一些注释并添加鼠标悬停效果来增强示例。给我一点时间，就能完成，伙计。 - Levi Morrison

我最初误读了你的评论。我保留了功能，但是http://jsfiddle.net/8KyCD/9/中有对我所做的内容的注释。我很高兴能向你介绍jsfiddle :) 不要忘记接受其中一个响应作为你的答案 ;) - Levi Morrison

为了纪念，一个清理过、更新过和记录了的版本也是可用的：http://jsfiddle.net/8KyCD/12/ - Levi Morrison