jQuery fadeIn 和 fadeOut - 交换 div

Question

总的来说，我对 jQuery 和 javascript 很陌生，但感谢这些网站，我才得以顺利通过。

我有一个页面，其中有六个隐藏的 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

有了你的 ids 可能是这样的：

$.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")));
}

如果你想要淡出的元素和淡入的元素占据相同的空间，请记住调整你的元素

位置