Question

我有100个div填充整个背景，div的不透明度设置为1.0，将动画为0.0，然后它将显示其背面的什么...它将动画第一个div，然后是第二个div然后第3等等..

<style>
 body{background:url(background.jpg)}
 #grids{ width:100%; height:100%}
 #grids div{width:10%; height:10%;opacity:1.0}
</style>
<body>
 <div id="grids">
  <div></div>
  <div></div>
  <div></div>
  <!-- *100 divs* -->
 </div>

我做的jquery是错的，但我会表示..

$(function(){
 var i=0;
 while(i <= 99){
  $("#grids div").eq(i).animate({
   "opacity" : "0.0"
  },500,"linear", function(){i++});
 }
});

请帮助我，用这个

Answer 1

你可以通过多种方式做到这一点。其中一个是：

animateDiv = function(divs) {
  var div = divs.shift();
  div.animate({opacity: 0}, 500, 'linear', function() {
    animateDiv(divs);
  });
};

divs = [];

$("div").each( function(i, element) {
   divs.push($(element));
});

animateDiv(divs);

jsbin demo here

Answer 2

问题是循环在调用回调之前运行，因此动画将在用户脚本，循环完成之后才会启动，i++部分永远不会被调用，因此您进行了无限循环

你可以做的是递归调用函数：

$(function(){
 var i=0;
 (function doOneAnimation(){
    $("#grids div").eq(i).animate({
      "opacity" : "0.0"
    },500,"linear", function(){
      if (i++<99) doOneAnimation();
    });
 })();
});

Demonstration（点击“在JS上运行”）

Answer 3

$divs = $("#grid div");

var current = 0;

function animDivs()
{    $div = $divs.eq(current++);
     if($div.length) $div.animate({opacity:0},500,animDivs);
}

animDivs();

在1之后动画100 divs 1

3 个答案: