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

回答1:

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

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

回答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.

回答3:

You can use functions or something like this:

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

来源：https://stackoverflow.com/questions/3390361/jquery-opacity-animation