jquery - How to animate object one by one? -

i trying animation object 1 one. using animate.css animation. have 7 li item in example below, zoom @ time, want product 1 zoom 1st 2,3.4---7 each delay 1s or 10ms like:

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

i saw animate.css document said delay use -vendor-animation-delay: 2s; tried still not success yet.

demo : http://jsfiddle.net/cyber007/6x9re4yf/

additional trying. whenever click on of them object zoom out same 1 one. idea how can that?

your -vendor-animation-delay: 2s; should animation-delay: 2s;

this works fine:

 animation-delay: 2s; 

http://jsfiddle.net/0lv8ycju/

additional trying. when ever click on of them object zoomout same 1 one. idea how can that

add jquery event this:

$(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   }); }); 

take here: http://jsfiddle.net/0lv8ycju/

update: have include jquery lib head of document

i managed simple loop each() zoumout 1 one small snippet here is:

$(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 increase delay time (miliseconds)     y+=1;         });    });  }); 

http://jsfiddle.net/88aqmy45/