jQuery fadeIn and fadeOut - swapping divs

Question

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

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).

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:

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

});

Answer 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.

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.

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.

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 2

Having your ids it might be like this:

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

Answer 3

$(document).ready(function(){

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

Answer 4

The best way would be to use 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

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

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

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

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

Answer 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.

Answer 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