This problem happens on IE6 and IE8 on two computers (IE6 used VMware), but not with IE7 on another computer. There is also a problem in Safari for VERY large images (Safari is related though I'm not real开发者_运维技巧ly concerned about it)
Basically when I animate the opacity using fadeTo() or animate({"opacity":) in large images (e.g. above 400x400px) all of the animated gifs on the page temporarily stop. (e.g. the red ones on the left)
See:
http://sky-walker.net/temp/housenav/fading3.html
100x640 and 640x100 don't have the problem but the 400x400 image (and 3000x3000) does so maybe the problem is based on the number of pixels in the image.
In Firefox and Chrome the gif animation and the fading picture is very smooth, even with the 3000x3000 image.
In Safari the gif animation and fading picture animate at the same speed with a low framerate (if the webpage contains the 3000x3000 image). If the page doesn't contain that hi-res image, the 400x400 image fades smoothly. (go to fading2.html)
In IE6 and IE 8 the fading is very smooth but the gif animations stutter or stop.
$(document).ready(function(){
$("#fadeout1").click(function(event) {
$("#pic1").fadeTo(2000, 0.2);
});
$("#fadein1").click(function(event) {
$("#pic1").fadeTo(2000, 1.0);
});
});
<img src="the-animated-icon.gif" />
<a href="#" id="fadeout1">Fade Out</a> | <a href="#" id="fadein1">Fade In</a> <img src="the-pic-to-fade.jpg" id="pic1" />
See the source code of the links for more details such as the exact names of the images.
EDIT: Though the previous link works on another IE computer with no problems, my original webpage doesn't: http://sky-walker.net/temp/housenav2/roomsnav2old.php When you hover over the square icons, the animated gif stops.
I would guess the issue is simply that your CPU or graphics card cannot keep up. Rendering opacity is a very intensive operation. I see no stoppage, just a slight slowing, in IE8 on a rather beefy machine here.
精彩评论