How to fade out a tab and replace it with another one, without removing either from the page?

I'm trying to design a tab control which will fade out the current content and rep开发者_运维问答lace it with new content, as can be seen here: http://jsfiddle.net/XcMuL/

The problem I'm having is that when you click between the two tabs, you can see a bit of a flicker where one tab fades out and and the other fades in at the same time, and for a brief period (a fraction of a second, but it's noticable) the two are stacked on top of each other. This is a problem because it pushes the content underneath it down for that period.

I'd like it so that one would fade out and only when it's completely gone the other would fade in. The thing is, I have to keep the text box hidden on the page because sometimes it contains a value that other controls need, so I can't just fade it out and then remove it from the dom, before fading the other one into its place.

Could somebody suggest a solution to this issue please? Suggestion on how to optimise the design are also welcome. Thanks

It's happening because the .fadeOut() for the already hidden <div> finishes instantly and triggers that callback, so just don't queue a fadeout for it. To do that, change this:

 $('.tab_container div').fadeOut(100, function () {

To this:

$('.tab_container div:visible').fadeOut(100, function () {

You can see the updated/working version here. In this version the already hidden one isn't faded, so that duplicate and instant callback for the .fadeIn() isn't triggered.