How do I get smooth transition between show / hide using jQuery?

Question

I have a select list with cities and a list of shopping malls. Selecting a city, will show shopping malls for that city.

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

You can see what I mean here: http://jsfiddle.net/egUHN/12/

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

UPDATE
@Zanfa came up with an excellent solution by the use of [promise().done()][1].

$('.city_list .city').fadeOut('normal').promise().done(function() {
    jQuery('.city_list .' + shmall_selected_city).fadeIn('normal');
});

I will test this later.

Answer 1

Why don't you just do hide() and fadeIn() instead of fadeOut() and fadeIn(). Using hide() and fadeIn() looks smooth and good. The code will become much complicated if you make it with fadeOut() and fadeIn(), and very few people would notice.

Try this: http://jsfiddle.net/egUHN/8/

Make it simple!