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 functionfade 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/

Please provide the HTML, too. In fact, having a http://jsfiddle.net would be nice. — test, Aug 04 '14 at 21:05

score 3 · Accepted Answer · answered Aug 04 '14 at 21:10

3

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

answered Aug 04 '14 at 21:10

low_rents

4,161
2
20
47

Hey, added the code to JSFiddle, as you can see I'm trying to click `.nav-level` but direct the page to the slide `.level` instead. Would this code be able to do that? – Kitson Aug 05 '14 at 11:07
fixed that for you: [fixed JSFiddle](http://jsfiddle.net/m924B/3/). you also had no `jQuery` included in your fiddle, plus you used the `.click()` function without anonymous callback function. i replaced it with the more recommendable `.on()` function. – low_rents Aug 05 '14 at 11:35

score 2 · Answer 2 · edited May 23 '17 at 10:33

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:

edited May 23 '17 at 10:33

Community

1
1

answered Aug 04 '14 at 21:06

Dave Newton

152,765
23
240
286

Thanks for that Dave, really useful to understand! – Kitson Aug 05 '14 at 11:09

Tidy up and reduce JQuery code

2 Answers2