Question

我试图动画（扩展气泡）几张图片：

<img src = "btn_add_friend@2x.png" class = "avatar">            
        <img src = "btn_add_friend@2x.png" class = "avatar">
        <img src = "btn_add_friend@2x.png" class = "avatar">
        <img src = "btn_add_friend@2x.png" class = "avatar">

使用jQuery函数each（）和animate（），如下所示：

jQuery(document).ready(function(){
    var av = $( ".avatar" ).toArray()
    jQuery.each(av,function (idx, avatar)
   {
      var $avatar = $(avatar);      
      $avatar.animate({height: "100px", width: "100px", left: "-=50px",top: "-=50px"}, "slow");

   })
})

然而，发生的事情是，只有第一个元素被动画化，就像数组的其余部分永远不会被迭代一样。

如果你能提出一个更好的方法，我会非常感激，尽管我真的很想知道为什么我的代码不能正常工作

Answer 1

我不明白为什么你的例子不会起作用，但是你的代码中有一些冗余会产生不必要的开销。由于您已经使用$(".avatar")选择了所有需要的元素，并且这样的jQuery调用返回一个数组，因此您无需将结果转换为数组并手动迭代其成员。我们可以对animate返回的所有元素调用$(".avatar")方法，如下所示：

$(document).ready(function(){
    $(".avatar").animate({height: "100px", width: "100px", left: "-=50px",top: "-=50px"}, "slow");
});

尝试为同一个类的多个对象设置动画

1 个答案: