jQuery不透明度动画

Question

我正在制作一个网站，它允许用户更改视图选项。我使用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);
    }});
});

- xsznix

Answer 1

jQuery的.animate()方法接受从0到1之间的数值。

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

我确信.animate()在传递你所提供的值时必须调用.parseFloat()（或其他类似函数），这将把你的0%转换为0（这是正确的），但会把100%转换为100，这是不正确的。

- user113716

---

@xsznix - FYI .animate() 可以用于任何你想要的动画效果，没有关于自定义或非自定义的规定（不管那是什么意思）。当你调用 .fadeOut() 时，它会直接调用 .animate()，所以你只是多了一步抽象。使用你喜欢的任何一种，并不要被那些制定武断规则的人所影响。:o) - user113716

.fadeIn() / fadeOut() 也更加“简洁”，因此更容易维护。 - xsznix

@xsznix - 确实，你可以节省一些字节并消耗一些处理器周期。:o) 使用 fadeOut() 对于简单的情况很好，但在需要停止和反转效果的情况下可能会出现问题。（常见于 mouseenter/mouseleave 事件。）它经常失去位置，结果你就卡在了半透明状态。如果发生这种情况要记住这点。:o) - user113716

@xsznix - 这是我所说的一个例子。http://jsfiddle.net/Abjq9/ 尝试快速悬停在蓝色文本上并移开。您会发现不透明度会卡在中间。使用.animate()可以解决这个问题。您可以更改代码，然后在顶部单击“运行”以测试更改。这是相同的示例，但使用.animate()。 - user113716

...而内联代码格式化是通过在您要格式化的“代码”的“开头”和“结尾”处使用位于左制表符键上方的键来完成的。:o)（我不知道那个字符叫什么。） - user113716

Answer 2

您可以使用函数或类似方式来实现此功能：

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

- user3109008

Answer 3

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

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

- Jacob Relkin

---

我猜我可以，但我真的不想再重做一次我的括号......因为我就是那么懒。 - xsznix

@xsznix，这样做更加简洁。animate 适用于自定义动画。 - Jacob Relkin

fadeOut会移除元素/淡出，而drop会移动其他元素。 - teynon

-1不回答OP的问题。正如@tom所说，fade*()的行为与.animate()不同。 - Jack

FadeOut 正在淡出并带有黑色背景 - 不透明度为透明。 - Jaroslav Štreit