无限调用动画时间不适用于“所有”元素答案

【问题标题】：Infinite call for animation time not working for "all" elements无限调用动画时间不适用于“所有”元素
【发布时间】：2012-03-10 14:28:43
【问题描述】：

我正在尝试为一组 div 元素（比如说 50 个）运行以下动画，但是，$.each() 函数仅适用于数组中的第一个元素。

$.each(droplets, function(){
splashVanish(this);
 }); 



  function splashVanish(droplet) {
   droplet.fadeOut(500, function(){
     droplet.css({'top':Math.random()*600+'px','left':Math.random()*1400+'px'});
     droplet.remove();
     $("body").append(droplet);
             //recursive call for infinite animation time
     droplet.fadeIn(500,function(){splashVanish(droplet)}); 
   });
 }

当上面的代码运行时，只有数组中的第一个divfadesOut，随机位置和fadesIn 无限动画持续时间。可悲的是，所有其他 49 个divs 都是静态的，并且没有执行相同的功能。

【问题讨论】：

什么是dropplet？它是一个 jQuery 对象吗？什么是液滴？ jQ 对象的集合？某种数组？
对不起，我没有说清楚..它只是一个 div 元素
强烈感觉this 是$.each 回调中的整个集合，而jquery doc 声明它应该是每个调用的当前值。您是否尝试过在此处设置断点并检查 this 值？
哦，我明白了，所以你的意思是，this 而不是 $(this) 指向集合本身？

标签： jquery css animation recursion infinite

【解决方案1】：

根据您的评论，如果droplets 是divs 的集合，您需要改用each()。 $.each() 迭代数组。试试这个，看看它是否有效。

droplets.each(function(){
    splashVanish($(this));
});

【讨论】：