0

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

<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++});
 }
});

请在这件事上给予我帮助

4

3 回答 3

2

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

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 演示在这里

于 2013-04-06T15:44:27.893 回答
0

问题是循环在调用回调之前运行，因此动画在用户脚本、循环完成之前不会开始，因此该i++部分永远不会被调用，因此您创建了一个无限循环。

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

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

演示（点击“在 JS 上运行”）

于 2013-04-06T15:40:12.893 回答
0 
$divs = $("#grid div");

var current = 0;

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

animDivs();
于 2013-04-06T15:40:37.570 回答