IE下半透明图片fadeOut()或是fadeIn()会先变黑再变换透明度
万恶的IE，用jQuery时IE下半透明图片fadeOut()或是fadeIn()会先变黑然后再变换透明度，不知怎么解决，求高手
展开
收起
1
条回答
写回答
写回答
-
经过实践，找到了一种可以在ie8下实现淡入淡出的动画方式，具体的原理就是如果我们使用的是div包括img的方式布置元素，通常我们会在div上加上filter,但是在ie8下，这样相当于在在div和img身上加了双重效果。而且滤镜本身就是加载了图片路径的，所以简单的说，就是在IE8下，只需要给div加上滤镜，img标签可以隐藏掉。这样就可以实现淡入淡出的效果。
代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript"> $(function(){ $(".a").css({"opacity":"0"}); $(".a").animate({ opacity:1 },1000,'ease-in-out') }); </script> <style type="text/css"> body{ padding: 0; margin: 0; background: #ccc; } img{ width: 100%; height: auto; } .a{ width: 30%; background: transparent; -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=logo.png,sizingMethod='scale');" } .lt-ie9 .normal{ visibility: hidden; } </style> </head> <body> <div class="a"> <img class="normal" src="logo.png" alt=""> </div> </body> </html>2019-07-17 19:12:20赞同 展开评论 打赏
问答分类：
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
问答排行榜
最热
最新
推荐问答
