摇摆CSS动画

我有一个CSS动画，我想以200ms的间隔应用。我已经设置了CSS这样的：摇摆CSS动画

.discrete { 
    position:relative; 
    opacity:1; 

    -webkit-transition: all .5s linear; 
    -moz-transition: all .5s linear; 
    -o-transition: all .5s linear; 
    transition: all .5s linear; 
} 

.discrete.out { 
    left:-40px; 
    opacity:0;  
}

然后我想错开在200ms的时间间隔.discrete.out类的应用。我已经试过如下：

$('.discrete').each(function() { 
    $(this).delay(200).addClass('out'); 
});

这：

$('.discrete').each(function() { 
    var theNode = $(this); 
    setTimeout(function() { 
     theNode.addClass('out'); 
    }, 200); 
});

但在这两种情况下，动画只是发生一次全部！

任何想法？

来源

2013-09-28 daniel0mullins

你可以使用

var els = $('.discrete'), 
    i = 0, 
    f = function() { 
     $(els[i++]).addClass('out'); 
     if(i < els.length) setTimeout(f, 200); 
    }; 
f();

Demo

来源

2013-09-28 23:06:49 Oriol

标记为接受这一个，因为这种方法似乎更快，是显著比使用jQuery的动画队列！谢谢大家！ – daniel0mullins

尝试使用jQuery的动画队列：http://jsfiddle.net/gwwar/7zm6q/2/

function createWorkQueueFunction($element) { 
    return function(next) { 
     $element.addClass("out"); 
     next(); 
    }; 
} 

$('button').click(function() { 
    var queue = $({}); //use the default animation queue 
    $(".discrete").each(function() { 
     queue.queue(createWorkQueueFunction($(this))); 
     queue.delay(200); 
    }); 
});

但为什么不是你的工作的例子？

以下原因不起作用的原因是因为jQuery在向fx队列添加200 ms延迟后立即添加'out'类。换句话说，delay（）不会暂停未添加到队列中的项目。有关jQuery队列如何工作的更多信息，请参阅：What are queues in jQuery?。（ '离散 '）。

$每个（函数（）{$ （本）.delay（200）.addClass（' 出'）;}）;

在第二个示例中，您将为每个.discrete元素添加相同的超时值。所以在大约200ms之后，每个人都会在几乎同一时间添加一个类。相反，你可能会想为每个元素设置一个200ms的超时，然后是400ms，然后是600ms等等。（ '离散 '）。

$每个（函数（）{风险theNode = $（本）;
的setTimeout（函数（）{ theNode.addClass（' 出'）;} ，200 ）;}）;

来源

2013-09-28 23:06:15

回答

相关问题