jQuery - function happening too soon or callback process confusion
<p>Trying to <code>.slideUp()</code>, clear the element with <code>.html('')</code>, then repopulate the element and <code>.slideDown()</code>.  Simple?  Yes.  Working? No.</p>

<p>The element is repopulated before the slide up in complete.  Essentially, you see the magician leave before the curtain is in place which spoils the show.</p>

<p><strong>jsFiddle</strong> : <a href="http://jsfiddle.net/Zt6gw/" rel="nofollow">http://jsfiddle.net/Zt6gw/</a></p>

<p><strong>jQuery</strong></p>

<pre><code>$('#oh_sort').change(function(){
    $('#oh_list_cont').slideUp(1000);
    $('#oh_list_cont').promise().done(ohReset());
    $('#oh_list_cont').slideDown(1000);
});

function getOpenhouse(){
    var data = $('#oh_sort').val();
    if(data == 'date'){
        $('#oh_list_cont').append('WOOOOOOORK!');
    }
    if(data == 'price'){
        $('#oh_list_cont').append('Please?!');
    }
    if(data == 'city'){
        $('#oh_list_cont').append('OMGWTFBBQ');
    }
}

function ohReset() {
    $('#oh_list_cont').html('');
    getOpenhouse();
}
</code></pre>

<p>I've tried this with the [complete] (callback?) function built in to .slideUp(), but then nothing populates and the second slide animation doesn't trigger.</p>
