悬停时 IE 中的动画不透明度不起作用
我有一个 PNG 可以帮助阅读悬停时的菜单,但淡入淡出在 IE 上不起作用,它在 Chrome 和 Firefox 中效果很好,我也使用过 PNG-24 和 PNG-8 没有任何效果
$(function() {
$('#gradient').animate({ "opacity": 0 });
$('#menu').hover(function() {
$('#gradient').removeClass('hidden').animate({opacity: '1'}, 400);
}, function() {
$('#gradient').animate({filter: '0'}, 400);
});
}); </script>
I have a PNG that comes in to help read the menu on hover, but the fade wont work on IE, It works great in Chrome and Firefox, I have used PNG-24 as well and PNG-8 nothing is working
$(function() {
$('#gradient').animate({ "opacity": 0 });
$('#menu').hover(function() {
$('#gradient').removeClass('hidden').animate({opacity: '1'}, 400);
}, function() {
$('#gradient').animate({filter: '0'}, 400);
});
}); </script>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
IE 至少旧版本在结合 PNG 透明度和 CSS 透明度方面存在严重问题。
我认为这在 IE9 中已修复,但我不确定。
每个单独工作都很好,但不能在同一个图像对象上工作。
IE at least older versions has serious problems combining PNG transparency and CSS transparency.
I think this is fixed in IE9 but I am not sure.
Each on their own works fine but not on the same image object.
IE8 及更低版本不支持标准 CSS
opacity
属性。它确实支持另一种不透明度方法,即使用 IE 特定的
filter
属性,但它的使用比opacity
复杂得多,因为filter< /code> 处理一系列的效果。
但是,既然您使用的是 JQuery,为什么不使用内置的
.fadeIn()
和.fadeOut()
效果 - 这样,JQuery 就可以为您完成所有工作,包括了解如何更改其所在浏览器的不透明度。请参阅 http:// /api.jquery.com/category/effects/
IE8 and lower do not support the standard CSS
opacity
attribute.It does support an alternative method of opacity, using the IE-specific
filter
attribute, but it is a lot more complex to work with thanopacity
, sincefilter
deals with a whole range of effects.However, since you're using JQuery, why don't you use the built-in
.fadeIn()
and.fadeOut()
effects instead - that way, JQuery does all the work for you, including working out how to change the opacity in the browser it's in.See http://api.jquery.com/category/effects/