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

Question

我正在编写一个脚本，它将动画一组jQuery Elements，但我遇到了一些问题。以下是我的要求：

• 连续动画
• 所有动画完成后的回调功能。可以全局定义回调
• 动画使用
处理浮动元素
• 整个解决方案可以是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

对于未来的观众：

我通过创建一个小的Jquery插件来解决这个问题：https://github.com/fillswitch/Jquery-Sequential-Animations

希望这有助于将来的其他用户！