fadeIn and fadeOut divs

fadeIn and fadeOut divs

Please help...

What I need to do is simple.

When I click on .log or .tweets it fades out a div and fades in another div. The problem I have though is that it fades in/fades out at the same time causing a 'bump' in the animation effect.

I need the first div to fade out first, and only when that has faded out completely can the second div fade in.

Here's my script.

Thanks in advance

C

  $(document).ready(function(){
                     
   $("#weight_log").hide();
   $("#selector").show();


    $(".log").click(function () {
       $("#latest_tweets").fadeOut(1000);
$("#weight_log").fadeIn(1000);
       

    });
   
   $(".tweets").click(function () {
    $("#weight_log").fadeOut(1000);
$("#latest_tweets").fadeIn(1000);
     
    });


  });