Tidy up and reduce JQuery code

Question

I'm trying to build a Parallax Scrolling type website (hiding and unhiding multiple "slides" on a single html page)

I have the basic jQuery code set-up which works as it is:

var main = function() {
$('.to-the-articles').click(function() {
    var currentSlide = $('.active-slide');
    var nextSlide = $('.active-slide').next();

    currentSlide.fadeOut(1200).removeClass('active-slide');
    nextSlide.fadeIn(1200).addClass('active-slide');
});

$('.nav-level1').click(function() {
    var currentSlide = $('.active-slide');
    var nextSlide = $('.active-slide').next();

    currentSlide.fadeOut(0).removeClass('active-slide');
    nextSlide.fadeIn(1200).addClass('active-slide');
});

$('.nav-level2').click(function() {
    $('.active-slide').fadeOut(0).removeClass('active-slide');
    $('.level2').fadeIn(1200).addClass('active-slide');
});

$('.nav-level3').click(function() {
    $('.active-slide').fadeOut(0).removeClass('active-slide');
    $('.level3').fadeIn(1200).addClass('active-slide');
});

$('.nav-level4').click(function() {
    $('.active-slide').fadeOut(0).removeClass('active-slide');
    $('.level4').fadeIn(1200).addClass('active-slide');
});

$('.back-home').click(function() {
    $('.active-slide').fadeOut(0).removeClass('active-slide');
    $('.home').fadeIn(1200).addClass('active-slide');
});
};

$(document).ready(main);

As you can see I repeat the same action multiple times, just changing the target to make the active slide.

I have had a go at reducing the code:

var fade = function(target) {
    var nextSlide = $(target);
    $('.active-slide').fadeOut(0).removeClass('active-slide');
    nextSlide.fadeIn(1200).addClass('active-slide');
};

var main = function() {
    $('.to-the-articles').click(fade('.home'));

    $('.nav-level1').click(fade('.level1'));
    $('.nav-level2').click(fade('.level2'));
    $('.nav-level3').click(fade('.level3'));
    $('.nav-level4').click(fade('.level4'));

    $('.back-home').click(fade('.home'));
};

$(document).ready(main);

Here I tried to create a function fade which is called when one of the selected classes are clicked, but instead it just runs the function fade as soon as the document is ready.

Could someone explain why function fade runs on $(document).ready and doesn't wait for the .click() ?

Edit:

Here is the current working code, the first one above: http://jsfiddle.net/m924B/1/ (Note: don't know how to load the images, but if you click the smaller missing image it will take you to the landing page.)

Here is the second attempt at the code: http://jsfiddle.net/m924B/2/

Answer 1

with your html looking something like this:

<div class="nav-level" data-level="1"></div>
<div class="nav-level" data-level="2"></div>
...

you can use the HTML5 data attribute to build your jQuery selector strings:

$('.nav-level').click(function() {
    $('.active-slide').fadeOut(0).removeClass('active-slide');
    $('.level' + $(this).data("level")).fadeIn(1200).addClass('active-slide');
});

so you just use the class "nav-level" for all elements and differentiate between them by using different values in the (custom) data-attribute "data-level".

Answer 2

To answer the "why" question:

Because you run fade in the click handler assignment.

Putting () after a function reference calls that function .

Note the difference compared with the following:

$('.nav-level1').click(function() { fade('.level1'); });

This passes a function that doesn't run immediately–a reference to an anonymous function.

Calling the anonymous function on the click calls fade .

Further details:

• Difference between calling function and referencing function?
• When do I use parenthesis and when do I not?