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时调用动画

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>

希望这可以帮到你

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

2 个答案: