jquery - 如何淡出一个选项卡并将其替换为另一个选项卡，而不从页面中删除任何一个？

Question

我正在尝试设计一个选项卡控件，它将淡出当前内容并用新内容替换它，如下所示:http://jsfiddle.net/XcMuL/

我遇到的问题是，当您在两个选项卡之间单击时，您会看到一个选项卡淡出而另一个选项卡同时淡入的闪烁情况，持续时间很短(a几分之一秒，但很明显)两者堆叠在一起。这是一个问题，因为它会在此期间将其下方的内容下推。

我希望这样一个会淡出，只有当它完全消失时，另一个才会淡入。问题是，我必须将文本框隐藏在页面上，因为有时它包含其他控件的值需要，所以我不能只是将它淡出然后将其从 dom 中删除，然后再将另一个淡入到位。

有人可以建议解决此问题的方法吗？也欢迎就如何优化设计提出建议。谢谢

Answer 1

它的发生是因为 .fadeOut() 对于已经隐藏的 <div>立即完成并触发该回调，所以不要为它排队淡出。为此，请更改此内容:

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

对此:

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

You can see the updated/working version here .在这个版本中，已经隐藏的那个不会消失，所以 .fadeIn() 的重复和即时回调没有被触发。