0

我正在编写一个脚本，它将为一组 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与此有关。）

谢谢！

4

3 回答 3

3

这有效

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

请记住：在定位动画中，使用position:relativeorposition:absolute和 play withtop, left, right, bottom而不是边距。更好

编辑：让它好一点。

于 2013-07-19T20:08:08.937 回答
1

新的

$(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'); }

小提琴

于 2013-07-19T20:03:29.937 回答
0

对于未来的观众：

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

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

于 2013-10-22T00:03:59.917 回答