0

当用户单击按钮时，我想在我的页面上显示动画 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 中有效的正确方法吗？

谢谢

4

1 回答 1

1

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

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

或类似的东西..

于 2013-10-10T01:53:59.627 回答