如何在 jQuery 中淡入*部分*?

发布于 2024-10-12 10:55:39 字数 255 浏览 7 评论 0原文

嘿大家。这看起来很简单,但由于某种原因,我很难将其拼凑在一起。我想创建一个动画“淡入”效果,其中 div 从 0 不透明度淡出到 50% 不透明度,然后停止。

据我了解:

var duration = 1000;
$('#mydiv').fadeIn(duration);

将 div 淡入 100%,没有限制此选项。

是否有一种优雅的方式来设置最终不透明度?

Hey everyone. This seems easy enough, but for some reason I'm having a hard time piecing it together. I want to create an animated "fade in" effect, where a div fades from 0 opacity to 50% opacity, and stops.

As far as I understand:

var duration = 1000;
$('#mydiv').fadeIn(duration);

will fade the div to 100%, with no option of limiting this.

Is there an elegant way of setting the finishing opacity?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

云雾 2024-10-19 10:55:40

.fadeTo();

就是这样。

http://api.jquery.com/fadeTo/


您会注意到 IE 和 Alpha 通道的问题。

这些对于 FF、chrome 和其他浏览器来说都很可爱……

opacity:0;
-moz-opacity:0;

IE 期望看到这个:

filter:alpha(opacity=x).

.fadeTo();

That's it.

http://api.jquery.com/fadeTo/


You will notice issues with IE and alpha channels.

These are lovely for FF, chrome and the rest...

opacity:0;
-moz-opacity:0;

IE expects to see this:

filter:alpha(opacity=x).
屋檐 2024-10-19 10:55:40

使用 .fadeTo() 并将第二个参数设置为 0.5。

use .fadeTo() with the second parameter set to 0.5.

也只是曾经 2024-10-19 10:55:40

无需添加不同的浏览器条件 - jQuery 只需使用标准的不透明度调用即可处理 IE 和 Firefox 中的不透明度:

$('#mydiv').animate(
    {
        opacity : 0.5
    }, 500
);

是的,像其他提到的那样使用 fadeTo。

No need to add the different browser conditional - jQuery will handle opacity in IE and firefox just by using the standard opacity call:

$('#mydiv').animate(
    {
        opacity : 0.5
    }, 500
);

And yeah, use fadeTo like the others mentioned.

橘亓 2024-10-19 10:55:39

我认为您使用 fadeTo() 方法。

I think you use the fadeTo() method.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文