Jquery slideDown/slideUp queue issue...

hey guys and gals,
I am having some trouble with some of my jquery code.  All of the 'slide' will stack up instead of disappearing (.hide()) like I want them to.

Here is a link to the code on jsFiddle: http://jsfiddle.net/2TGXB/3/
I will post the code here too:
Css:

.button{
    display: block;
    width: 50px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 10px;  
    background-color: #FF0000;
}

#buttonContainer{
    display: block;
    float: left;
    width: 50px;   
}

#slideContainer{
    display: block;
    float: left;
    width: 200px;  
    background-color: #666666;
    margin-top: 10px;
    margin-left: 5px;
}
#slideOne{
 display: none;
 background-color: white;   
}
#slideTwo{
 display: none;
 background-color: Red;  
}
#slideThree{
 display: none;
 background-color: Blue;  
}

Select allOpen in new window

HTML:

<div id="buttonContainer">
    <div id="One" class="button">One</div>
    <div id="Two" class="button">Two</div>
    <div id="Three" class="button">Three</div>
</div>

<div id="slideContainer">
    <div id="slideOne">Slide One</div>
    <div id="slideTwo">Slide Two</div>
    <div id="slideThree">Slide Three</div>
</div>

Select allOpen in new window

Jquery:

$(document).ready(function() {
    //match the height of the slideContainer with the button container - bottom padding
    var containerHeight = $('#buttonContainer').height() -10;
    $('#slideContainer').css("height", containerHeight);
   
    //Set up the hover
    $('#buttonContainer div').hover(
        function() {
            $(this).css("backgroundColor", "#CCCCCC");
            $(this).css("cursor", "pointer");
        },
        function() {
            $(this).css("backgroundColor", "");
            $(this).css("cursor", "");
        }
    );
    
    //Set up the click
    $('#buttonContainer div').click(function() {
        //get the id of the clicked div
       var divID = $(this).attr("id");

        //hide any visible slides and remove class
       $('#slideContainer div.visibleSlide').hide().removeClass("visibleSlide");
    
        //slideDown the related slide and add class
        $('#slide'+divID).css("height", containerHeight).slideDown("slow").addClass("visibleSlide");
   
        //keep current slide visible for 3 seconds, then slide up
        $(".visibleSlide").delay(3000).slideUp("fast").removeClass("visibleSlide");
    });
});

Select allOpen in new window

if you click on the buttons fairly quickly you will see that they all hang around for the full 3 seconds, instead of hiding on the click.

How do I fix this?

Any help would be appreciated!