javascript - How to attach for every Array-Element in jQuery different Animationeffects? And animate one by one forwards and backwards with 2 Buttons(back&next)? -

update: title changed! maybe or stil wrong defined. sorry bad english!

i'm new in jquery , in programming, javascript, css3 , html5. , i'm trying animate html elements if click on "next-button". works jquery own "animate"! want add each element own animation css-file.

here html snippet:

<div id="output0" class="output0">output0</div> <div id="output1" class="output1">output1</div> <div id="output2" class="output2">output2</div> <div id="output3" class="output3">output3</div> <div id="output4" class="output4">output4</div> 

here css snippet:

.output0 {     position: absolute;     top: 120px;     left: 300px;     width: 200px;     height: 500px;     border-top-left-radius: 10px 5px;      border-bottom-right-radius : 10% 5%;     border-top-right-radius : 10px;     background: #4d4ea3;     text-align: center;     text-shadow: 0 1px rgba(0, 0, 0, 0.6); color: #fff; font-size: 14px; line-height: 50px; -webkit-animation-duration: 3s; -webkit-animation-delay: 2s; -webkit-animation-iteration-count: 1; border-bottom-right-radius: 10% 5%; border-top-right-radius: 10px; }  ... , on each element/class own animation ... 

here script snippet:

var jbutton = $('#next'); $('.output','.output0', '.output1', '.output2','output3', '.output4', '.output5').hide(); jbutton.data(     "config",     {         index: 0,         collection: $('.output','.output0', '.output1', '.output2','output3', '.output4', '.output5')     }); jbutton.click(     function(objevent){         var jthis = $(this);         var objconfig = jthis.data("config");         if (objconfig.index < objconfig.collection.length){             $(objconfig.collection[objconfig.index++]         )         .$('.output0').addclass(fadeinleftbig),         $('.output1').addclass(flipinx),         $('.output2').addclass(fadeinrightbig),         $('.output3').addclass(fadeindownbig),         $('.output4').addclass(fadeinupbig),         $('.output5').addclass(animate);         //$('.output').addclass();         //.slidedown();         }         objevent.preventdefault;         return(false);     }); }); 

please guys!? idea?

edit:

sorry i'm answering now. had work in projects. i'm back. ok, used same classes , different id's. , id's used in css-file. main problem - "how can use in jquery other animation in code now?". mean not >slidedown, i.e. fadein, slidein each data object/array element 1 , should exact one, :)? - how can use data object second button "jbutton2" catch wich element >actual animated or in data storage is. jbutton2 want rollback animation , >for need know wich element actual there. help!

js:

$(jbutton1).data("config", {     index : 0,     collection : $('.output') } ... jbutton1.click(function(objevent) {      var jthis = $(this);      var objconfig = jthis.data("config");      if (objconfig.index < objconfig.collection.length) {                                                  $(objconfig.collection[objconfig.index++]).slidedown("slow");      }  } 

html:

<div id="output0" class="output">output0</div> <div id="output1" class="output">output1</div> <div id="output2" class="output">output2</div> <div id="output3" class="output">output3</div> <div id="output4" class="output">output4</div> 

it might worth noting jquery ui supports class switching while jquery alone doesn't.

from jquery's documentation animate()

note: jquery ui project extends .animate() method allowing non-numeric styles such colors animated. project includes mechanisms specifying animations through css classes rather individual attributes.

and here's link jquery ui documentation: http://jqueryui.com/switchclass/