jQuery fadeIn 和 fadeOut - 交换 div

Question

总的来说，我是 jQuery 和 javascript 的新手，但多亏了这些网站。

我有一个包含六个隐藏 div 的页面，这些 div 使用具有单独 ID 的相应链接调用。当每个 div 变为可见 (.fadeIn) 时，当前显示的 div 将被隐藏 (.fadeOut)。

一切正常，但我的代码似乎真的很长而且很笨拙。 请问有没有更简单、更短、代码量更少的方法来执行相同的任务？

这是我的 js：

提前非常感谢。 迈克

$(document).ready(function(){

$("#link1").click(function() {
$("#panel2").fadeOut("slow", function() {                       
$("#panel3").fadeOut("slow", function() {
$("#panel4").fadeOut("slow", function() {                       
$("#panel5").fadeOut("slow", function() {
$("#panel6").fadeOut("slow", function() {
$("#panel1").fadeIn("slow")});
});
});
});
});
});

$("#link2").click(function() {
    $("#panel1").fadeOut("slow", function() {
$("#panel3").fadeOut("slow", function() {
$("#panel4").fadeOut("slow", function() {                       
$("#panel5").fadeOut("slow", function() {
$("#panel6").fadeOut("slow", function() {
$("#panel2").fadeIn("slow")});
});
});
});
});
});

$("#link3").click(function() {
    $("#panel1").fadeOut("slow", function() {
$("#panel2").fadeOut("slow", function() {
$("#panel4").fadeOut("slow", function() {                       
$("#panel5").fadeOut("slow", function() {
$("#panel6").fadeOut("slow", function() {
$("#panel3").fadeIn("slow")});
});
});
});
});
});

$("#link4").click(function() {
    $("#panel1").fadeOut("slow", function() {
$("#panel2").fadeOut("slow", function() {
$("#panel3").fadeOut("slow", function() {                       
$("#panel5").fadeOut("slow", function() {
$("#panel6").fadeOut("slow", function() {
$("#panel4").fadeIn("slow")});
});
});
});
});
});

$("#link5").click(function() {
    $("#panel1").fadeOut("slow", function() {
$("#panel2").fadeOut("slow", function() {
$("#panel3").fadeOut("slow", function() {                       
$("#panel4").fadeOut("slow", function() {
$("#panel6").fadeOut("slow", function() {
$("#panel5").fadeIn("slow")});
});
});
});
});
});

$("#link6").click(function() {
    $("#panel1").fadeOut("slow", function() {
$("#panel2").fadeOut("slow", function() {
$("#panel3").fadeOut("slow", function() {                       
$("#panel4").fadeOut("slow", function() {
$("#panel5").fadeOut("slow", function() {
$("#panel6").fadeIn("slow")});
});
});
});
});
});

});

Answer 1

有你的 id 可能是这样的：

$.each([1,2,3,4,5,6], function(_, index) {
    $('#link' + index).click(function() {
        $('[id^=panel]').fadeOut('slow', function() {
            $('#panel' + index).fadeIn('slow');
        });
    })
})

Answer 2

$(document).ready(function(){

   $("a[id^='link']").click(function() {
      $("div[id^='panel']").fadeOut("slow");
      $("div#"+this.id.replace('link', 'panel')).fadeIn("slow");
   });
});

Answer 3

这段代码当然可以变得更加高效和灵活，但对于上面的一个简单的 6 元素示例，它应该就足够了。这主要是为了证明概念。

我选择以编程方式添加类，但理想情况下，您应该在 HTML 中添加类。如果是我，我可能也会使用 expandos 而不是 id 字符串替换。

编辑，已添加修复：
顺序动画的递归函数确保在正确的时间处理淡入淡出。对此可能有更有效的方法，例如使用计数器，但对于 6 个元素应该没问题，这更忠实地匹配您的原始代码。
修复了在不正确的时间处理动画，例如当您同时单击多个链接时，通过停止和结束动画导致多个面板尝试淡入。

jQuery(function($){
    //add links/panels class to all elements whose id begins with link/panel
    $("[id^=link]").addClass("links");
    $("[id^=panel]").addClass("panels");

    $(".links").click(function(e){
        //find all panels, make a normal array, and stop/finish all animations
        var panels=$.makeArray($(".panels").stop(true, true));

        //find panel to show
        var panelShow=$("#"+this.id.replace("link","panel"));

        //recursive function to execute fades in sequence
        function queueFX(queue){
            if(queue.length==0){
                panelShow.fadeIn("slow");
                return;
            }
            $(queue.shift()).fadeOut("slow", function(){
                queueFX(queue);
            });
        }
        queueFX(panels);

        //stop event propogation and default behavior, commented out because you don't seem to want this behavior
        e.preventDefault();
        //e.stopPropagation();
        //return false;
    });
});

Answer 4

最好的方法是使用http://api.jquery.com/toggle/

Toggle 可让您为一个人制作动画

$('#clickme').click(function() {
  $('#book').toggle('slow', function() {
    // Animation complete.
  });
});

至于真正缩短代码，我会为您的面板使用类标识符。

识别面板组，如

$("#panel3").fadeOut("slow", function() {
$("#panel4").fadeOut("slow", function() {                       
$("#panel5").fadeOut("slow", function() {
$("#panel6").fadeOut("slow", function() {

然后为相关的 HTML 元素分配一个类

您的 jQuery 现在可以是 $(".panelGroup1").fadeOut...

. jQuery 的类选择器，# 是 id 选择器。

查看选择器，您可以做很多其他疯狂的事情

http://api.jquery.com/?ns0=1&s=Selector&go=

Answer 5

很多好的解决方案，我有一个一般性的评论：

每个面板都有一个唯一的 id 似乎有点不必要。您可能有充分的理由这样做，但是将面板与类选择器分组还不够吗？这将使您的整体代码以及您的 jquery 更加简单和易于维护。

Answer 6

你可以这样做

function fadeElementIn(fadedElement) {
    $("[id^=panel]").fadeOut("slow");
    $(fadedElement).fadeIn("slow");
}

然后：

$(document).ready(function(){

    $("#link1").click(fadeElementIn($("#panel1")));
    $("#link2").click(fadeElementIn($("#panel2")));
    $("#link3").click(fadeElementIn($("#panel3")));
    $("#link4").click(fadeElementIn($("#panel4")));
}

如果您希望淡出的元素和淡入的元素占据相同的空间，请记住调整元素的位置

干杯