Question

我正在尝试逐个动画我的对象。我正在使用animate.css进行动画制作。比如我在下面的示例中有7个li项目，它会一直缩放，但我希望产品1 将缩放1然后2,3.4 --- 7但每个都会像1s或10ms这样的延迟：

  <li class="animated zoomIn prod pos1">product 1</li>
    <li class="animated zoomIn prod pos2">product 2</li>
    <li class="animated zoomIn prod pos3">product 3</li>
    <li class="animated zoomIn prod pos4">product 4</li>
    <li class="animated zoomIn prod pos5">product 5</li>
    <li class="animated zoomIn prod pos6">product 6</li>
    <li class="animated zoomIn prod pos7">product 7</li>

我看到animate.css文件说延迟使用-vendor-animation-delay: 2s;我尝试了但仍未成功。

演示：http://jsfiddle.net/cyber007/6x9re4yf/

另外我也在尝试。每当我点击它们中的任何一个时，它都会逐个缩小。知道我该怎么办？

Answer 1

您的-vendor-animation-delay: 2s;应为animation-delay: 2s;

这很好用：

 animation-delay: 2s;

http://jsfiddle.net/0Lv8ycju/

另外我也在尝试。当我点击其中任何一个对象时，它将逐个缩小。知道我该怎么做

添加如下的jquery事件：

$(document).ready(function(){

   $(".animated").click(function(){
      $(".hexagonarea li.pos1").delay(1).animate({width:"0px",height:   "0px"});
    $(".hexagonarea li.pos2").delay(500).animate({width:"0px",height: "0px"});        

        //add other pos3,pos4..... here

 });
});

看看这里： http://jsfiddle.net/0Lv8ycju/

更新：您还必须将jquery lib包含在文档的头部

我设法用每个（）到zoumOut做一个简单的循环，一个接一个地用一个小片段，所以这里是：

$(document).ready(function(){

 $(".animated").click(function(){
  var i=1; //delay time 
  var y=1;       
  $( "li" ).each(function( index ) {    
   $(".hexagonarea li.pos"+y).delay(1+i).animate({width:"0px",height:   "0px"});
    $(".hexagonarea li.pos"+y).css({overflow:"hidden"});
   i+=100;// increase this to increase delay time (miliseconds)
    y+=1;   
     });
   });
 });

http://jsfiddle.net/88aqmy45/

如何逐个动画对象？

1 个答案: