CODEWITHSUNDEEP
jquery
Aessandro
Aessandro

Reputation: 5771

Issue with callback function

the following site works fine, however when I click on the navigation tabs to fade in and out the relative content the footer fades in and out too and I don't want that to happen.

Link to the working site: http://www.alessandrosantese.com/Pilates/Pilates/HTML/

$(document).ready(function() 
{

    var
        home = $('.home'),
        classes = $('.classes'),
        contacts = $('.contacts'),
        home_tab = $('.home_tab'),
        classes_tab = $('.classes_tab'),
        contacts_tab = $('.contacts_tab'),
        h_c = home.add(contacts),
        h_cl = home.add(classes),
        c_cl = contacts.add(classes),
        fast = 1200;


    home.css('display', 'block'); // display the home section on page load to start with

    classes.css('display', 'none');
    contacts.css('display', 'none');

    classes_tab.click(function(evt){
        evt.preventDefault();
        h_c.fadeOut(fast, function(){
        classes.fadeIn(fast);
        });
    });

    contacts_tab.click(function(evt){
        evt.preventDefault(evt);
        h_cl.fadeOut(fast, function(){
            contacts.fadeIn(fast);
        });
    });

    home_tab.click(function(evt){
        evt.preventDefault();
        c_cl.fadeOut(fast, function(){
            home.fadeIn(fast);
        });
    });



});

All this is happening between the header and the footer, maybe there is something wrong in my jQuery

Upvotes: 0

Views: 53

Answers (1)

Rodik
Rodik

Reputation: 4092

The footer doesn't fade. It gets pushed down below our view because both content divs (the one fading out, and the one fading in) are visible during the animation.

what you should do is only fade in the new content once the old content is completely gone.

your flaw is using h_cl, which fires the callback quickly because you are hiding already hidden elements.

try this:

h_cl.filter(':visible').fadeOut(...

this will make sure you are fading only the visible elements, which will only fire the callback once it really is gone.

Upvotes: 2

Related Questions