jQuery不透明动画答案

【问题标题】：jQuery opacity animationjQuery不透明动画
【发布时间】：2011-03-24 08:27:29
【问题描述】：

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

淡出动画很好，但是当它淡入时，没有淡入淡出。它只是弹出，没有动画。

有问题的 jQuery 在 http://xsznix.my3gb.com/options.php.

我目前的代码是这样的：

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

【问题讨论】：

标签： javascript jquery jquery-animate opacity

【解决方案1】：

jQuery 的 .animate() 取值从 0 到 1。

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

我确定.animate() 必须在您传递的值上调用.parseFloat()（或其他东西），这会使您的0% 变为0（这是正确的），但您的100%进入100，这是不正确的。

【讨论】：

@xsznix - 仅供参考 .animate() 是“意味着”你想要的任何动画。关于自定义与非自定义（无论这意味着什么）没有规则。当您调用.fadeOut() 时，它直接调用.animate()，因此您只是从中抽象出来的一个步骤。使用你喜欢的任何一个，不要被制定任意规则的人影响。 :o)
.fadeIn()/fadeOut() 也“更干净”，因此更容易维护。
@xsznix - 确实，您节省了几个字节并花费了几个处理器周期。 :o) 使用fadeOut() 对于简单的情况很好，但在需要停止和反转效果的情况下可能会导致问题。（常见于mouseenter/mouseleave 事件。）它往往会失去它的位置，你最终会陷入半透明状态。如果发生这种情况，请记住一些事情。 :o)
$('#item').stop().fadeIn(); $('item').stop().fadeOut();就那么简单。你怎么做这样的内联代码？
@xsznix - 这是我的意思的一个例子。 jsfiddle.net/Abjq9 尝试快速将鼠标悬停在蓝色文本上。您会看到不透明度卡在中间。使用.animate() 解决了这个问题。您可以更改代码，然后单击顶部的 Run 以测试您的更改。这是相同的示例，但使用了.animate()。

【解决方案2】：

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

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

【讨论】：

我想我可以，但我真的不想再重做我的括号......因为我就是那么懒。
@xsznix，它也更干净。 animate 用于自定义动画。
fadeOut 删除元素/drops 移动其他元素。
-1 没有回答 OP 的问题。正如@tom 所说，fade*() 的行为与 .animate() 不同。
FadeOut 淡出黑色背景 - 不透明度是透明的

【解决方案3】：

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

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

【讨论】：