如何淡出一个选项卡并将其替换为另一个选项卡，而无需从页面中删除该选项卡？

Question

我试图设计，这将淡出目前的内容和新的内容替换它，因为在这里可以看到一个标签控件：http://jsfiddle.net/XcMuL/

我遇到的问题是，当你在两者之间点击选项卡上，可以看到一个闪烁点，其中一个选项卡淡出，另一个同时淡入，在短暂的时间内（几分之一秒，但很明显），两者叠加在每个选项卡的顶部其他。这是一个问题，因为它会将该内容下推到那段时间。

我希望它会淡出，只有当它完全消失时另一个才会淡入。事情是，我必须保持文本框隐藏在页面上，因为它有时包含其他值控制需要，所以我不能淡化它，然后将它从dom中删除，然后将另一个淡入到原处。

有人可以建议这个问题的解决方案吗？如何优化设计也值得欢迎。谢谢

Answer 1

这是因为已经隐藏的<div>的.fadeOut()立即完成并触发该回调，所以只是不要为它排队淡出。要做到这一点，改变这种：

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

要这样：

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

You can see the updated/working version here。在此版本中，已经隐藏的版本不会褪色，因此不会触发.fadeIn()的重复和即时回调。