目前,我将此脚本用于一种“选项卡”系统。单击一个选项卡时,它会隐藏所有其他选项卡。他们都是div的。但现在,我认为在选定的 div 加载之前它的褪色速度不够快。它最终会移动到所选且现在显示的 div 下方。
我不需要切换,因为如您所见,我有 5 个选项卡,我想在单击它们时打开它们各自的“_s”div。淡出、淡入。
有什么方法可以让淡出发生在淡入之前,或者添加延迟吗?我不知道如何在这个脚本中添加延迟,或者检查以确保 div 在新 div 淡入之前完全淡出。
我将不胜感激任何帮助。谢谢你!
<script>
$("#teach_one").click(function() {
$("#teach_one_s").fadeIn("slow");
$("#teach_two_s").fadeOut("fast");
$("#teach_three_s").fadeOut("fast");
$("#teach_four_s").fadeOut("fast");
$("#teach_five_s").fadeOut("fast");
});
$("#teach_two").click(function () {
$("#teach_two_s").fadeIn("slow");
$("#teach_one_s").fadeOut("fast");
$("#teach_three_s").fadeOut("fast");
$("#teach_four_s").fadeOut("fast");
$("#teach_five_s").fadeOut("fast");
});
$("#teach_three").click(function () {
$("#teach_three_s").fadeIn("slow");
$("#teach_one_s").fadeOut("fast");
$("#teach_two_s").fadeOut("fast");
$("#teach_four_s").fadeOut("fast");
$("#teach_five_s").fadeOut("fast");
});
$("#teach_four").click(function () {
$("#teach_four_s").fadeIn("slow");
$("#teach_one_s").fadeOut("fast");
$("#teach_two_s").fadeOut("fast");
$("#teach_three_s").fadeOut("fast");
$("#teach_five_s").fadeOut("fast");
});
$("#teach_five").click(function () {
$("#teach_five_s").fadeIn("slow");
$("#teach_one_s").fadeOut("fast");
$("#teach_two_s").fadeOut("fast");
$("#teach_three_s").fadeOut("fast");
$("#teach_four_s").fadeOut("fast");
});
</script>
根据您的要求,这是我的 HTML:
<ul class="noselect teach_home_navigator_tabs">
<li id="teach_one">
</li>
<li id="teach_two">
</li>
<li id="teach_three">
</li>
<li id="teach_four">
</li>
<li id="teach_five">
</li>
</ul>
<div class="infotab teach_round" id="teach_one_s">
stufff
</div>
<div class="infotab teach_round" id="teach_two_s">
stufff
</div>
<div class="infotab teach_round" id="teach_three_s">
stufff
</div>
<div class="infotab teach_round" id="teach_four_s">
stufff
</div>
<div class="infotab teach_round" id="teach_five_s">
stufff
</div>
如果没有看到你的标记,我无法确定,但是,为了简化你的 jQuery,并减少重复,你可以尝试使用这样的东西:
$('div[id^="teach_"]').click(
function(){
var showThis = this.id + '_s';
$('#' + showThis).fadeOut('slow',
function(){
$('div[id$="_s"]').not($(this)).fadeIn('fast');
});
});
Edited响应 @Josh 提供的 html。
$('.each_home_navigator_tabs li').click(
function(){
var showThis = this.id + '_s';
$('.infotab:visible').fadeOut('slow',
function(){
$('#' + showThis).fadeIn('fast');
});
});
参考:
-
属性开始于选择器:^=.
-
属性结尾选择器:$=.
-
not().
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)