如何让这个jQuery比我的更快？
目前，我将此脚本用于一种“tab”系统。 单击一个选项卡时，它会隐藏所有其他选项卡。 他们都是div。 但是现在，我认为在选定的div加载之前它的消失速度不够快。 它最终会被选中并正在显示的div下方移动。
我不想要切换，因为正如你所看到的，我有5个标签，我想在它们被点击时打开它们各自的“_s”div。 淡出，淡出。
任何使淡出效果在淡入之前发生的方法，或者可能会延迟？ 我不知道如何在此脚本中添加延迟，或检查以确保div在新div淡入之前完全淡化。
我很感激任何帮助。 谢谢！
$("#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"); }); 这是我的HTML请求：
-
-
-
-
-
stufff stufff stufff stufff stufff
没有看到你的标记我不能确定，但是，只是为了简化你的jQuery，并减少你的重复，你可以尝试使用这样的东西：
$('div[id^="teach_"]').click( function(){ var showThis = this.id + '_s'; $('#' + showThis).fadeOut('slow', function(){ $('div[id$="_s"]').not($(this)).fadeIn('fast'); }); });
编辑以回应@Josh提供的html。
$('.each_home_navigator_tabs li').click( function(){ var showThis = this.id + '_s'; $('.infotab:visible').fadeOut('slow', function(){ $('#' + showThis).fadeIn('fast'); }); });
参考文献：
- attribute-starts-with selector：
^=。 - attribute-ends-with selector：
$=。 -
not()。
您可以像这样重写代码。 所有faddIn的fadeOut除了单击之外，它faddIn
$("#teach_one, #teach_two, #teach_three, #teach_four, #teach_five").click(function() { var idd = this.id; $("#teach_one_s, #teach_two_s, #teach_three_s, #teach_four_s, #teach_five_s").fadeOut("fast "); $("#"+idd+"_s ").fadeIn("slow"); });
根据您的HTML更新
- one
- two
- three
- four
- five
stufff stufff stufff stufff stufff
你可以很容易地连接一些这样的function：
$(function(){ $(".infotab").hide(); // hide all content on load $("#teach_home_navigator_tabs li").click(function(e){ var id = this.id; var $current = $("#infotab:visible"); // get the currently selected tab if ($current.length == 0) { } $(current.fadeOut("fast", function() { // fade out current $("#" + id = "_s").fadeIn("slow"); // fade in selected }); } else { $("#" + id = "_s").fadeIn("slow"); } // fade in selected if no current }); $(".teach_home_navigator_tabs li:first").click(); // click first tab on load });
这样做：
$("#teach_one").click(function() { $("#teach_one_s").fadeIn("slow", function() { $("#teach_two_s").fadeOut("fast"); $("#teach_three_s").fadeOut("fast"); $("#teach_four_s").fadeOut("fast"); $("#teach_five_s").fadeOut("fast"); }); });
其余的重复，基本上等待fadeIn完成然后调用回调函数淡出其余部分。
但你的代码可以明显缩短恕我直言，如果你显示你的HTML我敢打赌它可以压缩成一个click绑定。
使用：
$('#teach_four_s').animate({opacity:0},200)
其中200是效果持续时间的毫秒数
这将使您能够更好地控制转换的时间
这是我正在使用的HTML。
stufff stufff stufff stufff stufff