我在 div 容器中有一些 div 项目,我想连续地为它们设置动画。
我知道如何在无限循环中运行我的函数,但是选择第一个 div、对其进行动画处理并在完成动画后将其移动到末尾存在问题。
我的函数如下所示:
function MoveItems() {
$(".container:first").animate(
{width: "0px"},
1000,
function (){
$('.container').append($(this));
$('.container').remove($(this));
}
);
};
我做错了什么? ;/
edit:
您关于删除的说法是正确的,但动画仍然无法正常工作。
我认为选择器工作不正常。
我的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:first")
选择它找到的第一个 .container。
你要$(".container>div:first")
您还可以通过在父级上操作来“加速”最终的删除/追加,而不是对 .container 进行另一个 DOM 搜索:
var $me = $(this);
$me.parent().append($me);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)