【问题标题】: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() 取值从 01

    $(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的内置函数fadeInfadeOut

    $('#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);
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2011-04-10
      • 2017-01-06
      • 2012-12-26
      • 2011-01-08
      • 2011-12-01
      • 2010-12-05
      • 1970-01-01
      相关资源
      最近更新 更多