Jquery Fadein And Fadeout - Swapping Divs

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 w

Solution 1:

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

Solution 2:

$(document).ready(function(){

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

Solution 3:

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 animationsvar panels=$.makeArray($(".panels").stop(true, true));

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

        //recursive function to execute fades in sequencefunctionqueueFX(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;
    });
});

Solution 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=

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