jQuery fadeIn和fadeOut - 交换div

I'm new to jQuery and javascript in general but am plugging my way through thanks to sites like these.

我一般都是jQuery和javascript的新手,但是由于像这样的网站,我正在堵塞我的方式。

I have a page with six hidden divs that are called with corresponding links with individual ids. When each div is made visable (.fadeIn), the currently displayed div is hidden (.fadeOut).

我有一个页面,其中包含六个隐藏的div,这些div通过相应的链接与各个ID进行调用。当每个div可见(.fadeIn)时,隐藏当前显示的div(.fadeOut)。

It all works fine but my code seems to be really long and ungainly. Is there an easier, shorter, less code-intensive way to perform the same task please?

一切正常,但我的代码似乎很长很笨拙。是否有更简单,更短,代码更少的方式来执行相同的任务?

Here is my js:

这是我的js:

Many thanks in advance. Mike

提前谢谢了。麦克风

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

});

6 个解决方案

#1

This code could certainly be made more efficient and flexible, but for a simple 6 element example as the above it should be enough. This was mostly done as just a proof of concept.

这个代码当然可以更高效和灵活,但对于一个简单的6元素示例,如上所述它应该足够了。这主要是作为概念证明完成的。

I chose to add the classes programmatically, but ideally you should have the classes added in the HTML. If it were me I would probably also have used expandos instead of id string replacement.

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

EDIT, fixes added:
Recursive function for sequential animation makes sure that fadeIn is processed at the right time. There may be a more efficient method for this, such as using a counter, but for just 6 elements it should be fine, and this matches your original code more faithfully.
Fix for animations processing at incorrect times, such as when you click many links simultaneously, causing multiple panels to try to fadeIn, by stopping and finishing animations.

编辑,补充添加:顺序动画的递归函数确保在正确的时间处理fadeIn。可能有一个更有效的方法,例如使用计数器,但只有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;
    });
});

#2

Having your ids it might be like this:

拥有你的id可能是这样的:

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

#3

$(document).ready(function(){

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

#4

The best way would be to use http://api.jquery.com/toggle/

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

Toggle lets you the animation for one

切换可以让你动画一个

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

As for truely Shortening the code I would use a class identifier for your panels.

至于缩短代码,我会使用面板的类标识符。

Identify panel groups like

识别面板组

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

and then assign the associated HTML elements a class like

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

Your jQuery can now be $(".panelGroup1").fadeOut...

你的jQuery现在可以是$(“。panelGroup1”)。fadeOut ...

The . class selector for jQuery and the # is the id Selector.

这个。 jQuery的类选择器和#是id Selector。

Check out selectors and you can do a bunch of other crazy things

查看选择器,你可以做一堆其他疯狂的事情

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

#5

Lots of good solutions, I have a general comment:

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

It seems a bit unnecessary for each panel to have a unique id. You might have a perfect reason to do so, but wouldn't it be enough to group your panels with a class selector? This would make your overall code, as well as your jquery, much simpler and easier to maintain.

每个面板都有一个独特的ID似乎没有必要。你可能有一个完美的理由这样做,但是用面板选择器对你的面板进行分组是不够的?这将使您的整体代码以及您的jquery更简单,更易于维护。

#6

You could do something like

你可以做点什么

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

And then:

$(document).ready(function(){

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

remember to adjust your elements positioning if you want the one that's fading out and the one that's fading in to occupy the same space

记得调整你的元素定位,如果你想要一个淡出的那个和那个淡入的那个占据相同的空间

cheers