Question

请考虑以下事项：

html ：

<div class="circle"> </div>

css ：

.circle{
position:fixed;
width:100px;
height:100px;
border:none;
border-radius:50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
background-color: red;}

jquery的：

$(document).ready(function(){
var cArray=[];
for(var i=0; i<7; i++){
var c=$('.circle').clone().appendTo('body');
cArray.push(c); 
}
animateCircle(cArray);
});

function getNewPosition(){
var h= $(window).height()-100;
var w= $(window).width()-100;

var nh=Math.floor(Math.random()*h);
var nw=Math.floor(Math.random()*w);

return [nh,nw];
 }

function animateCircle(cArr){

 $.each(cArr, function(index,value){          
 var newp = getNewPosition();
$(this).animate({   top: newp[0],left: newp[1],function(){animateCircle();}  });     

});

}

使用上面的代码，我创建了一个圆圈，克隆了它，并将每个新元素添加到cArray，如您所见。问题是所有克隆的圆圈只有一次动画，它们是＆＃39;每次获得一个新职位时都应该继续前进，但显然我有些不对劲。谢谢你。

Answer 1

$(this).animate({   top: newp[0],left: newp[1],function(){animateCircle();}  });

这是有问题的路线。 1，有语法错误。 2，存在逻辑错误。

语法错误，您没有在正确的位置关闭对象。

$(this).animate({   top: newp[0],left: newp[1]}, function(){animateCircle();}); 
//                                            ^^

逻辑错误，animateCircle采用数组（cArr）的参数：

$(this).animate({top: newp[0], left: newp[1]}, function(){animateCircle(cArr);});

使用jquery动画化数组元素

1 个答案: