Question

Javascript

$(document).ready(function() {  
$(".container").animate({left:'120px'}, 6000).queue(function(next){
$(".child").css('display', 'none'); 
});
}); 

The above script animates a box and then hides it after the animation is completed.
The problem is that I have a set of identical boxes, and I want to animate each of them. I am trying to use .each to get it to work but so far it doesnt work at all.
So to highlight my question once more*I want to animate a set of identical boxes one after the other in chronological order (html-vise, the one on top first, then the next), and then hide the box setting the css property and value. This works for one box, but not for several. I tried using .each, but no good news there.*

HTML

<div class="container">
<div class="child"></div>
<div class="child"></div>
</div>

Answer 1

You can also do it this way !

<script>
$(document).ready(function() {  
$(".container").animate({left:'120px'}, 6000).queue(function(next){
var childs = $('.child'),
    i = 0;
(function() {
  $(childs[i++]).hide('slow',arguments.callee);
})();
});
});
</script>

Hope this can help you