Jquery Opacity Animation

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 f

Solution 1:

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.

Solution 2:

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

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

Solution 3:

You can use functions or something like this:

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