n00b: effect callbacks on two divs

n00b: effect callbacks on two divs

Hello hello...

I'm JS child and JQuery newborn so please help me:

I have two divs:

<div id="carret">
<div id="carret_content">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</div>
</div>
<div id="handle">h</div>


carret div has background image, and carret_content is obviously some content

I'm trying to first fadeOut carret_content and then animate carret when someone clicks "h" (I'm going to replace "h" with image because it would be very ugly to leave this that way )

this is my js:
$(document).ready(function(){
   setHandler("collapse");
   carret_content    = $("#carret_content");
   carret       = $("#carret");
});

var carret_content;
var carret;

function setHandler(what) {   
   switch (what) {
      case "collapse":
      $("#handle").unbind();
      $("#handle").bind ("click", function(e) {         
         carret.dequeue();
         carret_content.dequeue();         
         withCarretContent("fadeOut");   
         setHandler("expand");      
      });
      break;
      case "expand":      
      $("#handle").unbind();
      $("#handle").bind ("click", function(e) {
         //console.log("expand");
         carret.dequeue();
         carret_content.dequeue();         
         withCarretContent("fadeIn");   
         setHandler("collapse")      
      });
      break;
   }
}

function withCarretContent (what) {   
   switch (what) {
      case "fadeOut":
      carret_content.fadeOut("fast", withCarret("slideOut"));   
//shouldn't those callbacks start after fadeOut???   
      break;
      case "fadeIn":
      carret_content.fadeIn("fast", withCarret("slideIn"));      
      break;
   }
}

function withCarret (what) {
   switch (what) {
      case "slideOut":      
      carret.animate({
         width: 5,
         opacity: 0,
         height: 300
      }, 1500 );
      break;
      case "slideIn":      
      carret.animate({
         width: "30%",
         opacity: 1,
         height: 300
      }, 1500 );
      break;
   }
}


But carret_content fadeOut and animate of carret starts at the same time...

What am I doing wrong?