How do I get smooth transition between show / hide using jQuery?
<p>I have a select list with cities and a list of shopping malls.
Selecting a city, will show shopping malls for that city.</p>

<p>My "problem" is that the transition between hiding shopping malls for one city and showing for another, it not smooth. It "bumpy".</p>

<p>You can see what I mean here: <a href="http://jsfiddle.net/egUHN/12/" rel="nofollow">http://jsfiddle.net/egUHN/12/</a></p>

<p>What is the best way to achieve a smooth transition?
I've tried using show/hide as well, but it does not help.</p>

<p><strong>UPDATE</strong><br>
@Zanfa came up with an excellent solution by the use of <code>[promise().done()][1]</code>.</p>

<pre><code>$('.city_list .city').fadeOut('normal').promise().done(function() {
    jQuery('.city_list .' + shmall_selected_city).fadeIn('normal');
});
</code></pre>

<p>I will test this later.</p>
