Question

I am making a website, and it allows users to change view options. I use jQuery to smooth animations for font changing. It fades the whole page out and back in again with the new fonts.

The fade out animation is fine, but when it fades back in, there’s no fade. It just pops up, no animation.

The problematic jQuery is in http://xsznix.my3gb.com/options.php.

The code I have so far is this:

$('#font-classic').click(function(){
    $(document.body).animate({opacity: '0%'},{duration: 1000, complete: function(){
        // font changing code here
        $(document.body).animate({opacity: '100%'}, 1000);
    }});
});

Answer 1

Why not use jQuery‘s built-in functions fadeIn and fadeOut?

$('#font-classic').click(function(){
    $('body').fadeOut('normal', function(){
        $('body').fadeIn();
    }});
});