在 IE 6,7 和 8 中播放不透明度为 0 的 Gif 动画答案

【问题标题】：Gif animaton with opacity 0 playing in IE6,7 and 8在 IE 6,7 和 8 中播放不透明度为 0 的 Gif 动画
【发布时间】：2013-10-17 14:53:46
【问题描述】：

我想在用户单击按钮时在我的页面上显示动画 gif。我已将 gif 放置在带有 img 标签的页面上，并为标签提供了 opacity:0 的 CSS 样式，因此页面加载后图像不会立即播放：

HTML

<img id='thankyou' src='http://www.mysite.com/images/thankyou.gif' />

CSS

img#thankyou {
   opacity:0;
}

按钮代码为：

$('.submitButton').click(function() {
      $('img#thankyou').attr('src', 'http://www.mysite.com/images/thankyou.gif')
                       .animate({opacity : 1},500,'linear');
});

这适用于大多数浏览器，但 IE6、7 和 8 会在页面加载后立即播放动画。他们似乎不尊重我给它的 opacity:0 风格。

我尝试为图像标签设置 display:none 样式，然后单击按钮将其更改为阻止，同时调出不透明度。然后，在 IE6、7、8 中，当页面加载但单击不会在开始时重新启动动画时，动画不会播放。当您单击时，您会在中途捕捉动画，或者在您单击的任何地方。

如果我在 HTML img 标签中省略了 src 属性，那么它最初肯定无法播放，当它加载时，我的页面上会出现一个难看的“缺少图像”图像。

有人可以提出正确的方法吗，在 IE6、7、8 中有效？

谢谢

【问题讨论】：

标签： jquery html internet-explorer animation

【解决方案1】：

IE8 及以下不支持不透明度（这解释了您所看到的内容）；我相信你想要的是“过滤器”：

img#thankyou {
    /* IE */
    filter: alpha(opacity=0);
    /* Everybody else */
    opacity: 0;
}

或者类似的东西..

【讨论】：