using jQuery to slide one div down and the other visible divs up (sliding content based navigation)
<p>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.</p>

<p>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. </p>

<p>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.</p>

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

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

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

&lt;div id="serviceContent"&gt;
            &lt;div id="contactContent" class="contentPane mpHidden"&gt;
                &lt;div class="noise_overlay_300"&gt;
                    &lt;div id="contactData"&gt;
                        &lt;span&gt;contact&lt;/span&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="contentFooter"&gt;&lt;/div&gt;
            &lt;/div&gt;
            &lt;div id="linkedinContent" class="contentPane mpHidden"&gt;
                &lt;div class="noise_overlay_300"&gt;
                    &lt;div id="linkedinData" class="mpCenter"&gt;

                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="contentFooter"&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;
            &lt;/div&gt;
            &lt;div id="facebookContent" class="contentPane mpHidden"&gt;
                &lt;div class="noise_overlay_300"&gt;
                    &lt;div id="facebookData" class="mpCenter"&gt;
                        &lt;span&gt;facebook&lt;/span&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="contentFooter"&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;
            &lt;/div&gt;
            &lt;div id="twitterContent" class="contentPane mpHidden"&gt;
                &lt;div class="noise_overlay_300"&gt;
                    &lt;div id="twitterData" class="mpCenter"&gt;
                        &lt;span&gt;twitter&lt;/span&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="contentFooter"&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;
            &lt;/div&gt;
            &lt;div id="flickrContent" class="contentPane mpHidden"&gt;
                &lt;div class="noise_overlay_300"&gt;
                    &lt;div id="flickrData" class="mpCenter"&gt;
                        &lt;span&gt;flickr&lt;/span&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="contentFooter"&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
</code></pre>
