Javascript jQuery 不透明度动画

jQuery opacity animation

提问by xsznix

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.

我正在制作一个网站，它允许用户更改视图选项。我使用 jQuery 来平滑字体更改的动画。它使整个页面淡出，然后使用新字体再次淡入。

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.

有问题的 jQuery 位于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);
    }});
});

采纳答案by Jacob Relkin

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

为什么不使用jQuery的内置函数fadeIn和fadeOut？

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

回答by user113716

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

jQuery 的.animate()值从0到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.

我敢肯定，.animate()必须.parseFloat()对您传递的值进行调用（或其他操作），这将使您的0%进入0（正确），但您的100%into100将是不正确的。

回答by user3109008

You can use functions or something like this:

您可以使用函数或类似的东西：

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