Question

当用户点击按钮时，我想在我的页面上显示动画gif。我已经在页面上放置了带有img标签的gif，并为标签指定了一种不透明度的CSS样式：0因此，只要页面加载，图像就不会播放：

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会在页面加载后立即播放动画。他们似乎不尊重不透明度：我给它的0风格。

我尝试给图片标签一个显示：无样式，然后单击按钮将其更改为阻止，同时显示不透明度。然后，在IE6,7,8中，当页面加载但是点击不会在开始时重新开始动画时，动画不会播放。当您单击时，您可以在中途捕捉动画，或者在您点击的任何位置捕捉动画。

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

有人可以建议正确的方法，这可以在IE6,7,8中使用吗？

由于

Answer 1

IE8及以下版本不支持不透明度（这解释了你所看到的）;我相信你想要的是'过滤'：

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

或类似的......

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

1 个答案: