jQuery FadeIn 在 IE 上失去透明度

发布于 2024-08-22 12:32:26 字数 724 浏览 4 评论 0原文

我在 Internet Explorer 上使用 jQuery FadeIn 时遇到一个设计问题:

我有一个从页面底部到中心的动画 div,我需要实现 div 突然淡入并动画到页面中心的效果。我使用 jQuery FadeIn 获得了这种效果,但在 Internet Explorer(7、8)上我失去了 div 的透明度,在 Firefox 上它工作正常。

这是我用来为 div 提供透明度的 CSS 代码(这是应用于 div 的类)

display:none;
filter:alpha(opacity=90); 
-moz-opacity: 0.9;
opacity: 0.9;

然后,通过 javascript 我使 div 出现(淡出):

$(Popup).fadeIn(700);
$(Popup).css({
    "filter": "alpha(opacity=90)",
    "-moz-opacity": "0.9",
    "opacity": "0.9" });
//popup falling
$(Popup).animate({ 
                marginTop: '+=' + (windowHeight / 2 - popupHeight / 2) + 'px'
            }, 1000 );

如您所见,我尝试重新分配div 的 CSS 属性,但它也不起作用。

提前致谢。

I'm having a design issue using jQuery FadeIn on Internet Explorer:

I have a div which animates from the bottom to the center of the page, I needed to implement the effect that the div suddenly fades in and animates to the center of the page. I got that effect using jQuery FadeIn, but I lose the transparency of the div just on Internet Explorer (7, 8), on Firefox it works fine.

This is the CSS code I'm using to give the transparency to the div (this is a class applyed to the div)

display:none;
filter:alpha(opacity=90); 
-moz-opacity: 0.9;
opacity: 0.9;

Then, via javascript I made the div appears (fade):

$(Popup).fadeIn(700);
$(Popup).css({
    "filter": "alpha(opacity=90)",
    "-moz-opacity": "0.9",
    "opacity": "0.9" });
//popup falling
$(Popup).animate({ 
                marginTop: '+=' + (windowHeight / 2 - popupHeight / 2) + 'px'
            }, 1000 );

As you can see, I tried re-asigning the CSS properties to the div, but it doesn't works either.

Thanks in advance.

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

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

发布评论

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

评论(3

讽刺将军 2024-08-29 12:32:26

您的 CSS 属性正在被分配,但会立即被 fadeIn 的连续操作所覆盖,该操作是异步完成的。您需要使用回调机制链接动画,以便它们不会竞争(除非您希望它们同时发生)。无论如何,您应该将 CSS 重新分配移至 fadeIn 的回调中。

$(Popup).fadeIn(700, function() {
   $(this).css({ ... });
});

Your CSS properties are being assigned, but immediately overridden by the continuing action of the fadeIn, which is done asynchronously. You need to chain your animations using the callback mechanism so that they aren't competing (unless you want them to happen at the same time). In any event, you should move the CSS reassignment to the callback for the fadeIn.

$(Popup).fadeIn(700, function() {
   $(this).css({ ... });
});
云巢 2024-08-29 12:32:26

你应该使用 jQuery 的 fadeTo,而不是 fadeIn:

$(Popup).fadeTo(700, 0.9);

You should use jQuery's fadeTo, rather than fadeIn:

$(Popup).fadeTo(700, 0.9);
烈酒灼喉 2024-08-29 12:32:26

使用 jQuery fadeTo 函数: http://api.jquery.com/fadeTo/

替换:

$(Popup).fadeIn(700);

为:

$(Popup).fadeTo(700,0.9);

Use the jQuery fadeTo function: http://api.jquery.com/fadeTo/

replace:

$(Popup).fadeIn(700);

with:

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