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

Answer 2

你也可以这样做！

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

希望这可以帮到你