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

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_lis开发者_JAVA百科t .' + shmall_selected_city).fadeIn('normal');
});

I will test this later.

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!

The problem is that you have individual li's for each city and each one is placed below the other. Your best bet is to fix this with CSS, by adding:

.city_list .city { 
    position: absolute;
    display: none; 
}

Only problem is that your cities with more than one mall will be bunched together, you could fix this by changing your last jQuery line (fadeIn) to:

var count = 15;
jQuery('.city_list .' + shmall_selected_city).each(function(){
    jQuery(this).fadeIn('normal');
    jQuery(this).css('top',count + 'px');
    count += 15;
});

You could try absolute positioning the <a> elements in the upper left corner:

.city_list { 
    /* ... */
    position: relative;
}

a {
    /* ... */
    position: absolute;
    left: 0;
    top: 0;
}

That would put all the links in one place so there wouldn't be any jumping around during the transitions. During the transition, the new element would be fading in while the old one was fading out and they'd be overlapping during the fading.

For example: http://jsfiddle.net/ambiguous/tv9NA/

You have some cities with multiple links and just doing the above leaves them all stacked on top of each. That's probably not going to make anyone very happy but maybe if you wrap a <div> around your links, move the positioning to the <div>, and the fadeIn/fadeOut the <div>. Or put each block of <li> elements in their own absolutely positioned <ul> and fade the whole lists in and out as needed.

If you are able to change the html, consider putting the lists of shipping centres into a hidden div with a class lists or data and cloning from there into your .city_list div on select change.

See http://jsfiddle.net/rob_cowie/qDFKn/24/