jquery - 如何一个一个地动画对象？

Question

我正在尝试为我的对象一个一个地制作动画。我正在使用 animate.css 制作动画。假设我有 7 个 li 元素，如下例所示，它一次都是缩放的，但我希望 product 1 会先缩放 1，然后缩放 2,3.4---7但每个都会延迟 1 秒或 10 毫秒，例如:

  <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/

additional I am also trying. when ever I click on any of them object it will zoomout same like one by one. Any idea how can I do that

像这样添加一个 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 库包含到文档的头部

我设法用 each() 做了一个简单的循环，用一个小片段一个一个地 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/