help with a jQuery slide

help with a jQuery slide

Hi,
i am a designer, i am totally noob with java but i want to learn, i am amazed by the things jquery can do, right now i need some help, i am trying to create a slide using jquery, it contains some pictures, it has to auto slide. So i have 5 divs (5 slide frames) behind a bigger div with a background picture (lets call it div6) and each of this 5 divs (each of this divs contains a picture for this slide) slide from behind of the div6 and disappear before the other div slide from behind the div6. And after that, after all the 5 divs are displayed the animation has to start again. So i have made it to make the 5 divs slide but i cant make the slide frames to start one by one, they all start together one behind the another and i could not find anywhere how to solve this problem. The 2nd problem is how to make the slide to start again without refreshing the page (i really have no idea how to do this). The script i have used is:
  1. $(document).ready(function() { //so at the start of the web page the animation will start.
    //i thought if i put all this one behind another will start one by one. They don't.

  2.      $("#slide1").animate({"top": "+=166px"}, "slow");
         $("#slide1").animate({ height: 'hide', opacity: 'hide' }, 'slow');
         $("#slide2").animate({"top": "+=166px"}, "slow");
         $("#slide2").animate({ height: 'hide', opacity: 'hide' }, 'slow');
         $("#slide3").animate({"top": "+=166px"}, "slow");
         $("#slide3").animate({ height: 'hide', opacity: 'hide' }, 'slow');
         $("#slide4").animate({"top": "+=166px"}, "slow");
         $("#slide4").animate({ height: 'hide', opacity: 'hide' }, 'slow');
         $("#slide5").animate({"top": "+=166px"}, "slow");
         $("#slide5").animate({ height: 'hide', opacity: 'hide' }, 'slow');

    }); 










I have also tried to do like this:
  1. $(document).ready(function() {
         $("#slide1").animate({"top": "+=166px"}, "slow");
         $("#slide1").animate({ height: 'hide', opacity: 'hide' }, 'slow');
    });



  2. $(document).ready(function() {
         $("#slide2").animate({"top": "+=166px"}, "slow");
         $("#slide2").animate({ height: 'hide', opacity: 'hide' }, 'slow');
    }); 


Doesn't work either. PLS help

Thank you.