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

Question

我正在尝试设计一个标签控件，它会淡出当前内容并将其替换为新内容，如下所示：http://jsfiddle.net/XcMuL/

我遇到的问题是当你在两个标签之间点击时，你可以看到一个闪烁的地方，其中一个标签淡出而另一个标签同时消失，并且短暂的一段时间（a几分之一，但它是明显的）两者堆叠在一起。这是一个问题，因为它会在此期间将其下面的内容推下来。

我喜欢它，以便人们会淡出，只有当它完全消失时，另一个才会淡入。事实是，我必须将文本框隐藏在页面上，因为有时它包含一个其他控件的值需要，所以我不能将它淡出然后从dom中移除它，然后将另一个褪色到它的位置。

有人可以建议解决这个问题吗？关于如何优化设计的建议也是受欢迎的。感谢

Answer 1

这种情况正在发生，因为已经隐藏的<div>的{​​{3}}会立即完成并触发回调，所以不要为它排队淡出。为此，请更改此：

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

对此：

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

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