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

【问题标题】：Jquery/CSS sequential element animation with callback带有回调的 Jquery/CSS 顺序元素动画
【发布时间】：2013-10-22 08:03:59
【问题描述】：

我正在编写一个脚本，它将为一组 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; }

$(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 与此有关。）

谢谢！

【问题讨论】：

好吧，.hiddenForAnimation{ opacity:0;边距顶部：0px； } 将摆脱跳跃。您还可以从js中删除设置margin top的行

标签： javascript jquery css jquery-animate css-animations

【解决方案1】：

这行得通

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

记住：在定位动画中，使用position:relative 或position:absolute 并使用top, left, right, bottom 而不是边距进行播放。比较好

编辑：让它好一点。

【讨论】：

太棒了！我最初尝试使用top，但没有运气。那是因为我没有position:relative。哦！这个答案没有重复的唯一一点是是否有更好的重构方法？
为什么在循环中有索引参数时使用另一个计数器变量？只需检查if(i == $('.block').length-1)

【解决方案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

【讨论】：

您是否更改了标记？我得到了不同的结果。所有元素都立即生成动画。见：jsfiddle.net/fmpeyton/tUN9c
afterPageAnimation() 没有触发 =X

【解决方案3】：

对于未来的观众：

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

希望这对未来的其他用户有所帮助！

【讨论】：