代码之家 › 专栏 › 技术社区 › DaveDev

如何淡出一个选项卡并用另一个替换它,而不从页面中删除任何一个选项卡?

css html jquery

DaveDev · 技术社区 · 15 年前

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

我遇到的问题是,当你在两个选项卡之间单击时,你会看到一点闪烁,其中一个选项卡淡出,另一个同时淡入,在很短的一段时间内(不到一秒钟,但很明显),两个选项卡堆叠在一起。这是一个问题,因为它会在这段时间内将其下面的内容向下推。

我希望它能让一个褪色,只有当它完全消失时,另一个才会褪色。问题是,我必须将文本框隐藏在页面上,因为有时它包含其他控件需要的值,所以我不能在另一个控件淡出到位之前先将其淡出,然后将其从DOM中移除。

有人能提出解决这个问题的建议吗?也欢迎对如何优化设计提出建议。谢谢

1 回复 | 直到 15 年前

Nick Craver 15 年前

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

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

对此:

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

You can see the updated/working version here . 在这个版本中,已经隐藏的不会褪色,因此 .fadeIn() 不会触发。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

11 月前

Dr.0000FF · jQuery按钮点击不显示/隐藏内容

1 年前

user28928120 · 如何在jquery中选择所有类?

1 年前

LauraNMS · 如何使用Waypoints js实现粘性元素和偏移量

1 年前

Eliable · 使点击计数器和进度条协同工作

1 年前

mlri · 从不同的onclick事件执行相同的javascript函数

1 年前

Cymro · 如何将jquery$(this)与$(document).keyup一起使用

1 年前

Jack Maessen · 在处理程序上使用时如何获取输入类型

1 年前

BlueDogRanch · 使用jQuery Datepicker和dateFormat、altFormat和altField以及$(this)

1 年前

Jameel · Jquery:未捕获SyntaxError:在参数列表后的“Node”上执行“appendChild”失败:缺失)

1 年前