I am trying to just fade the content of section#secondary out and once the content has been faded out, the parent (section#secondary) should animate 'shut' in a slider animation.

All this is working however the durations are not and I cannot figure out why.

Here is my code:

HTML

<section id="secondary">
    <a href="#" class="slide_button">&laquo;</a> <!-- slide in/back button -->              
    <article>

        <h1>photos</h1>
        <div class="album_nav"><a href="#">photo 1 of 6</a> | <a href="#">create an album</a></div>
        <div class="bar">
            <p class="section_title">current image title</p>
        </div>

        <section class="image">

            <div class="links"> 
                <a class="_back album_link" href="#">« from the album: james new toy</a>
                <nav>
                    <a href="#" class="_back small_button">back</a>
                    <a href="#" class="_next small_button">next</a>
                </nav>
            </div>  

            <img src="http://localhost/~jannis/3781_doggie_wonderland/www/preview/static/images/sample-image-enlarged.jpg" width="418" height="280" alt="" />

        </section>

    </article>

    <footer>
        <embed src="http://localhost/~jannis/3781_doggie_wonderland/www/preview/static/flash/secondary-footer.swf" wmode="transparent" width="495" height="115" type="application/x-shockwave-flash" />
    </footer>

</section> <!-- close secondary -->

jQuery

// =============================
// = Close button (slide away) =
// =============================
$('a.slide_button').click(function() {
    $(this).closest('section#secondary').children('*').fadeOut('slow', function() {
        $('section#secondary').animate({'width':'0'}, 3000);
    });
});

Because the content of section#secondary is variable I use the * selector.

What happens is that the fadeOut uses the appropriate slow speed but as soon as the callback fires (once the content is faded out) the section#secondary animates to width: 0 within a couple of milliseconds and not the 3000 ms ( 3 sec ) I set the animation duration to.

Any ideas would be appreciated.

PS: I cannot post an example at this point but since this is more a matter of theory of jQuery I don't think an example is necessary here. Correct me if I am wrong..