javascript - 使用动画和每个迭代动画

Question

Javascript

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

上面的脚本动画了一个盒子，然后在动画完成后隐藏它。 问题是我有一组相同的盒子，我想为每个盒子制作动画。我正在尝试使用 .each 来让它工作，但到目前为止它根本不起作用。 因此，再次强调我的问题*我想按时间顺序一个接一个地为一组相同的框制作动画(html-vise，第一个在最上面，然后是下一个)，然后隐藏框设置css 属性和值。这适用于一个盒子，但不适用于多个盒子。我尝试使用 .each，但没有什么好消息。*

HTML

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

Answer 1

function queue(start) 
{
    var rest = [].splice.call(arguments, 1),
    promise = $.Deferred();

   if (start) 
   {
      $.when(start()).then(function () {
      queue.apply(window, rest);
                });
   } else {
        promise.resolve();
}
    return promise;
}





function animate()
{
    queue(function () {
        return $( ".child:first" ).animate({opacity: "show"}, "slow").delay(1500);
        }, function () {
        return $( ".child:first" ).animate({opacity: "hide"}, "slow");  
        }, function () {
        return $( ".child:second" ).animate({opacity: "show"}, "slow").delay(1500);
        }, function () {
        return $( ".child:second" ).animate({opacity: "hide"}, "slow"); 
    }});    
}

当你想淡入淡出你的div时调用animate