CODEWITHSUNDEEP
jqueryloops
delmonte
delmonte

Reputation: 15

animate 100 divs 1 after 1

i have 100 divs that fills the entire background, the opacity of divs is set to 1.0 that will animate to 0.0, then it will reveal whats on its back.. it will animate the first div, then the 2nd div and then 3rd and so on..

<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>

the jquery i did is wrong but i will show..

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

please help me, with this

Upvotes: 0

Views: 103

Answers (3)

Ivan Drinchev
Ivan Drinchev

Reputation: 19581

You can do this by many ways. One of is :

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

Upvotes: 2

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382170

The problem is that the loop runs before the callbacks are called, so as the animations won't start until the user script, your loops, finishes, the i++ part is never called so you made an infinite loop.

What you can do is recursively call a function :

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

Demonstration (click "Run on JS")

Upvotes: 0

r043v
r043v

Reputation: 1869

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

var current = 0;

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

animDivs();

Upvotes: 0

Related Questions