How to get a smooth transition between show / hide using jQuery?

Question

I have a selection list with cities and a list of shopping centers. Having chosen a city, you will see the shopping centers of this city.

My “problem” is that the transition between hiding shopping centers for one city and a display for another is not smooth. It is bumpy.

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

What is the best way to achieve a smooth transition? I also tried using show / hide, but that does not help.

UPDATE
@Zanfa came up with a great solution using [promise().done()][1] .

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

I will spend it later.

Answer 1

The problem is that you have an individual for each city, and each of them is placed under another. It is best to fix this with CSS by adding:

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

Only problem is that your cities with several shopping centers will be grouped together, you can fix this by changing your last jQuery (fadeIn) line to:

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

Answer 2

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 more complicated if you make it with fadeOut() and fadeIn() , and very few people will notice.

Try the following: http://jsfiddle.net/egUHN/8/

Make it easy!

Answer 3

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

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

This will put all the links in one place so that there are no jumps during the transitions. During the transition, the new element will disappear, while the old goes out, and they will overlap during fading.

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

---

You have several cities with several links, and just done above leaves them all stacked on top of each. This probably won’t make anyone very happy, but perhaps if you wrap the <div> around your links, move the positioning to <div> and fadeIn / fadeOut to <div> . Or put each block of <li> elements in their own absolutely positioned <ul> and fade out all lists if necessary.

Answer 4

If you can change the html, consider moving the lists of delivery centers to a hidden div with the lists or data class and cloning from there to your .city_list div when you select the change.

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