causing multiple elements to slide in opposite directions from one click event

I have an 'intro' page that I am creating and I want to click a butto开发者_如何学Cn in the middle which causes two divs to slide

the top div slides UP out of view and the bottom div slides DOWN out of view or even better the top div Slides UP and stops at a certain point and the bottom one does the same.

how could this be acheived? I've looked around and I'm very new to javascript so I just need an accurate example. please dont just say, use the .bind() method! because I wont understand how to implement that

---

Use animate function:

$(document).ready(function(){
   $('#yourButtonId').click(function(){
      $('#yourTopDivId').animate({
          //css properties - specify new position with css
          top: '0px',
          left: '20px'
      },5000  // animation will run for 5 seconds
      ,function(){
       // what should happen when it's done goes here
       });
   });
   $('#yourButtonId').click(function(){
      $('#yourBottomDivId').animate({
          //css properties - specify new position with css
          bottom: '0px',
          left: '20px'
      },5000  // animation will run for 5 seconds
      ,function(){
       // what should happen when it's done goes here
       });
   });
});

I haven't tested it but it should work.

//edit I have tested it now. Here is the link: http://jsfiddle.net/ZCh9x/