当前位置: 动力学知识库 > 问答 > 编程问答 >

jquery - Gif animaton with opacity 0 playing in IE6,7 and 8

问题描述:

I'd like to display an animated gif on my page when a user clicks a button. I've placed the gif on the page with an img tag and given the tag a CSS style of opacity:0 so the image doesn't play as soon as the page loads:

HTML

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

CSS

img#thankyou {

opacity:0;

}

The button code is:

$('.submitButton').click(function() {

$('img#thankyou').attr('src', 'http://www.mysite.com/images/thankyou.gif')

.animate({opacity : 1},500,'linear');

});

This works on most browsers but IE6, 7, and 8 play the animation as soon as the page loads. They don't seem to honor the opacity:0 style I gave it.

I tried giving the image tag a display:none style and then havingt button click change it to block, along with bringing up the opacity. The animation doesn't play, then, in IE6,7,8 when the page loads but the click doesn't restart the animation at the beginning. When you click you catch the animation half way through, or wherever it is at moment you click.

If I omit the src attribute in the HTML img tag, so it certainly can't play initially, I get an ugly "missing image" image on my page when it loads.

Can someone suggest the correct way to do this, that works in IE6,7,8?

Thanks

网友答案:

IE8 and below don't support opacity (which explains what you're seeing); I believe what you want is 'filter':

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

Or something like that..

分享给朋友:
您可能感兴趣的文章:
随机阅读: