I want to make a slideshow in Jquery.I have 3 divs inside a parent div like bellow:

1.  <div id="rotator" >
         <div class="current">
          <img id="one" src="images/banner1.gif" width="480px" height="150px"/>
         </div>
         <div >
          <img id="two" src="images/banner3.gif" width="480px" height="150px"/>
         </div>
         <div >
          <img id="three" src="images/banner4.gif" width="480px" height="150px"/>
         </div>
         </div>
   
   
   
   
   
   
   
   
   
   

and also the JQuery :

1. $(function()
    {
     setInterval("rotateImages()",5000);
    })
   
   
   

   function rotateImages()
      {
         var oCurrPhoto = $('#rotator div.current');
         var oNextPhoto = oCurrPhoto.next();
      var arr=['one','two','three'];
      if(oNextPhoto.length==0)
      oNextPhoto = $('#rotator div:last');
     jQuery.each(arr,function() {
      $('#'+ this).hide('drop', { direction: 'left' }, 1000);    
     });
      }
   
   
   
   
   
   
   
   
   
   

the result which I've been expected is that each image from the parent div to have the hide effect,with a delay of about 1 secound for each image.The script dosen't make that.All divs dissappear simultaneous  after 5 secounds.

What's wrong in my code?

Thanks,