using jQuery to slide one div down and the other visible divs up (sliding content based navigation)

Figured I would ask here because I can't seem to find an easy solution or a solution on here that fits my needs. The problem I'm having with my site at the moment is when dealing with slide animations and with timing of those animations.

So when a user clicks one of my navigation buttons there is a panel that slides out the content based on the button pressed. if you click another button it will slide that one previous div back up and slide down the new content panel.

The main problem I'm getting is either I get animation timing issues because the other one starts sliding as the other one is for some reason.

All my content panels are siblings to one another...so here's the jQuery I'm using....any suggestions would be greatly appreciated!

$('a.navBtn').click(function(){
    var divName = this.name;
    $.when(function(){
        $("#"+divName).siblings().filter(":visible").slideUp("slow");
    }).then(function(){
        $("#"+divName).slideDown("slow");
    })
});

<div id="services">
                    <div class="noise_overlay">
                        <div id="contact"><a href="#" class="navBtn" name="contactContent"><img src="i/contact.png" /></a></div>
                        <div id="linkedin"><a href="#" class="navBtn" name="linkedinContent"><img src="i/linkedin.png" /></a></div>
                        <div id="facebook"><a href="#" class="navBtn" name="facebookContent"><img src="i/facebook.png" /></a></div>
                        <div id="twitter"><a href="#" class="navBtn" name="twitterContent"><img src="i/twitter.png" /></a></div>
                        <div id="flickr"><a href="#" class="navBtn" name="flickrContent"><img src="i/flickr.png" /></a></div>
                    </div>
                </div>

<div id="serviceContent">
            <div id="contactContent" class="contentPane mpHidden">
                <div class="noise_overlay_300">
                    <div id="contactData">
                        <span>contact</span>
                    </div>
                </div>
                <div class="contentFooter"></div>
            </div>
            <div id="linkedinContent" class="contentPane mpHidden">
                <div class="noise_overlay_300">
                    <div id="linkedinData" class="mpCenter">

                    </div>
                </div>
                <div class="contentFooter"><span></span></div开发者_开发知识库>
            </div>
            <div id="facebookContent" class="contentPane mpHidden">
                <div class="noise_overlay_300">
                    <div id="facebookData" class="mpCenter">
                        <span>facebook</span>
                    </div>
                </div>
                <div class="contentFooter"><span></span></div>
            </div>
            <div id="twitterContent" class="contentPane mpHidden">
                <div class="noise_overlay_300">
                    <div id="twitterData" class="mpCenter">
                        <span>twitter</span>
                    </div>
                </div>
                <div class="contentFooter"><span></span></div>
            </div>
            <div id="flickrContent" class="contentPane mpHidden">
                <div class="noise_overlay_300">
                    <div id="flickrData" class="mpCenter">
                        <span>flickr</span>
                    </div>
                </div>
                <div class="contentFooter"><span></span></div>
            </div>
        </div>

You need to chain your animation events so the slideDown doesn't happen until the slideUp is done:

http://api.jquery.com/slideUp/

 $("#"+divName).siblings().filter(":visible").slideUp("slow", function() {
     $("#"+divName).slideDown("slow");
 });

Should be something like that.

I have made a simple jQuery snippet for you. The javascript:

$(function() {
    $('a.navBtn').click(function(e) {
        var pane = $(this).attr('name'),
            switchPanes = function(name) {
                if($('.contentPane:visible').attr('id') === name){
                    return;
                }
                if($('.contentPane:visible').length > 0){
                    $('.contentPane:visible').slideUp('fast', function() {
                        $('#' + name).slideDown('medium');
                    });                    
                } else {
                    $('#' + name).slideDown('medium');                    
                }
            };

        switchPanes(pane);
        e.preventDefault();
    });
});

Here's a working(?) version. I use the callback of the slideUP to call the slideDown.

http://jsfiddle.net/yazYF/

EDIT: Just like the Justin said, I just have some code to test with. :)

EDIT 2: Now with an initial pane visible

http://jsfiddle.net/yazYF/1/

EDIT 3: Initially nothing...

http://jsfiddle.net/yazYF/2/