Question

我正在使用此脚本通过CSS为div设置动画。它遍历了24个div列表，并对超出其容器溢出的那些对象应用了动画类。

我想使用css（'animation-delay'）使每个div动画之间都存在延迟。

如何使每个子元素都应用动画延迟，但是每个子元素要多花1秒？

 $(function() {
    $('span.beer-info').each(function(i) {
        var element = $(this)
                        .clone()
                        .css({display: 'inline', width: 'auto', visibility: 'hidden'})
                        .appendTo('body');

        if( element.width() > $(this).width() ) {
            $(this).addClass( "mover-1" );
            $(this).css('animation-duration', ($(this).width() / element.width() * 1) + 's' + ' !important');
        }

        element.remove();
    });
});

我发现this与我要找的东西极为相似：

@for $i from 1 through 12 {
  .yourclass:nth-child(#{$i}) {
    animation-delay: $i * 0.5;
  }
}

但是我不知道如何在没有错误的情况下将其放入代码中。

另一种解决方案here，但同样，我也不知道如何正确地集成它。

$('ul li').each(function(i){
    var t = $(this);
    setTimeout(function(){ t.addClass('animation'); }, (i+1) * 50);
});

任何指导将不胜感激。

在动画延迟的每次迭代中增加一秒

0 个答案: