优雅地为一堆div设置动画

时间:2014-11-03 20:37:41

标签: javascript jquery html css animation

我正在尝试实现一个漂亮的动画,但是我有点卡住使用CSS只是为了达到我想要的效果。目前我正在使用animate.css为其中的新元素设置动画,但旧元素不会优雅地移动,因为我没有进一步的动画。

这是一个http://jsfiddle.net/tcq8kuy6/1/,用于说明动画的当前状态。

setInterval(function(){
    var newbox = "<div class='child animated bounceInDown'></div>"
$('.container').prepend(newbox);

}, 2000);

1 个答案:

答案 0 :(得分:1)

fiddle

为了完成这项工作,我做了几件事: -

1 CSS

 .child {
 width: 40px;
 height: 40px;
 display: block; //inline block results in jerkiness when inserting items 
 margin:2px; //added margin to compensate for inline-block becoming block.
 border: 1px solid #AAAAAA;
 }

2 JS

setTimeout(function(){
    var newbox = "<div class='child  animated bounceInDown'></div>"
    $(newbox).prependTo('.container').hide().slideDown(500);//notice that I prepend to the container, then hide the 'newbox' and then slide it down -> this gives the desired effect.

}, 2000);

希望这有帮助。