jquery - Managing a queue with multiple elements -

i need event start , stop/clear queue of animations/actions multiple elements. created code based off example.

this should give starting point:

css

div {     width:40px;     height:40px; }  #one {     background:green; }  #two {     background: red; } 

​ html

<button id="startqueue">go</button> <button id="clearqueue">clear</button>  <div id="one" class="queueitem"></div> <div id="two" class="queueitem"></div>​ 

js

// global queue array // var queue = [];  // start queue // $('#startqueue').bind('click', function(e){     // go through each element , fade out //     $('.queueitem').each(function(i, $el){         // don't delay first element//         if (i==0) {             queue.push($(this).fadeout(5000));         } else {             queue.push($(this).delay(5000*i).fadeout(5000));         }             }); });  // stop / clear queue // $('#clearqueue').bind('click', function(e){     $.each(queue, function(i, $el){         // stop animation , reset elements //         $el.stop(true, true).css({             display: 'block',             opacity: '1'         });          // clear queue array //         queue = [];     }); }); 

demo here

good luck!