jQuery opacity animation

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

Answer 2

jQuery's .animate() takes values from 0 to 1.

$(document.body).animate({opacity: 0}, 1000);
$(document.body).animate({opacity: 1}, 1000);

I'm sure that .animate() must call .parseFloat() (or something) on the values you're passing, which would make your 0% into 0 (which is correct), but your 100% into 100, which would be incorrect.

Answer 3

You can use functions or something like this:

$(document.body).animate({ opacity: 1/2 }, 1000);