带回调的Jquery/CSS顺序元素动画

Question

我正在编写一个脚本，它将动画一组jQuery元素，但我遇到了一些问题。下面是我的要求：所有动画之后

回调功能

• 连续动画完成。回调可在全球范围定义
• 动漫作品上浮动元素与
• 整个解决方案可以被JS/jQuery的/ CSS或组合

这里是我到目前为止得到：http://jsfiddle.net/fmpeyton/cqAws/

HTML

<div class="block">Im a box</div> 
<div class="block">me too</div> 
<div class="block">and me!</div> 
<div class="block">am I?</div> 
<div class="block">yes.</div> 
<div class="block">Im a box</div> 
<div class="block">me too</div> 
<div class="block">and me!</div> 
<div class="block">am I?</div> 
<div class="block">yes.</div> 
<div class="block">Im a box</div> 
<div class="block">me too</div> 
<div class="block">and me!</div> 
<div class="block">am I?</div> 
<div class="block">yes.</div> 

CSS

.block{ 
    float:left; 
    width:100px; 
    background: red; 
    margin: 0 10px; 
    padding: 10px; 
} 
.hiddenForAnimation{ opacity:0; margin-top:-20px; } 

JS

$(function(){ 
    $('.block').addClass('hiddenForAnimation').each(function(i){ 
     var delay = i * 200, 
      animationSpeed = 800; 
     $(this).delay(delay).animate({opacity: '1', marginTop: '0px' 
     }, animationSpeed, function(){ if(typeof afterPageAnimation === 'function' && i === $(this).length){ setTimeout(afterPageAnimation, delay + animationSpeed);} $(this).removeClass('hiddenForAnimation').attr('style',''); }); 
    }); 
}); 

function afterPageAnimation(){ alert('animation is done!'); } 

我的问题：

• 有没有更好的方式来重构这个JS脚本是连续的？使用delay()是有效的，但不优雅。
• 没有被动画
• 当在一排的最后一个元素完成动画，下一行中第一个元素开始在最右边后直接执行的回调，然后跳转到左边（我怀疑margin-top有事）

谢谢！

Answer 1

这工作

http://jsfiddle.net/cqAws/12/

记住：在定位动画，使用position:relative或position:absolute与top, left, right, bottom而不是利润率玩。 这是更好

编辑：让它更好一点。

Answer 2

新

$(function(){ 
    j=0; 
    $('.block').each(function(i){ 
     var interv = +(i*800); 
     var animationSpeed = 800; 

     $(this).toggleClass('hiddenForAnimation') 
       .delay(interv) 
       .animate({opacity: '1', marginTop: '0'},animationSpeed,function(){ 
        j++; 
        $(this).delay(+(interv+animationSpeed)) 
          .toggleClass('hiddenForAnimation') 
          .attr('style',''); 
          if(j>=+($('.block').length)) afterPageAnimation(); 

       }); 
    }); 
}); 

function afterPageAnimation(){ alert('cool'); } 

FIDDLE

Answer 3

对于未来的观众：https://github.com/fillswitch/Jquery-Sequential-Animations

希望这有助于在未来的某个其他用户：

我已经在这里创造发现了一个小的jQuery插件解决了这个！