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

Question

我正在编写一个脚本来为一组 jQuery 元素设置动画，但我遇到了一些问题。这是我的要求:

• 连续动画
• 所有动画完成后的回调功能。可以全局定义回调
• 动画适用于 float 元素
• 整个解决方案可以是 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 而不是边距。 比较好

编辑:让它变得更好一些。