动画 GIF 在大型 JQuery 不透明动画期间停止

Question

此问题发生在两台计算机上的 IE6 和 IE8 上（IE6 使用 VMware），但在另一台计算机上的 IE7 上没有。对于非常大的图像，Safari 中也存在问题（Safari 是相关的，但我并不真正关心它）

基本上，当我在大图像（例如 400x400 像素以上）中使用 fadeTo() 或 animate({"opacity":) 为不透明度设置动画时，页面上的所有动画 gif 都会暂时停止。 （例如左边的红色）

见：

http://sky-walker.net/temp/housenav/fading3.html

100x640 和 640x100 没有问题，但 400x400 图像（和 3000x3000）有问题，可能问题是基于图像中的像素数。

在 Firefox 和 Chrome 中，gif 动画和渐变图片非常流畅，即使是 3000x3000 的图像。

在 Safari 中，gif 动画和淡入淡出的图片以相同的速度以低帧速率进行动画处理（如果网页包含 3000x3000 图像）。如果页面不包含该高分辨率图像，则 400x400 图像会平滑淡化。 （去fading2.html）

在 IE6 和 IE 8 中，褪色非常平滑，但 gif 动画卡顿或停止。

$(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" />

请参阅链接的源代码以获取更多详细信息，例如图像的确切名称。

---

编辑： 虽然之前的链接在另一台 IE 计算机上运行没有问题，但我的原始网页却没有：http://sky-walker.net/temp/housenav2/roomsnav2old.php 当您将鼠标悬停在方形图标上时，动画 gif 停止。

Answer 1

我猜问题只是你的 CPU 或显卡跟不上。渲染不透明度是一项非常密集的操作。在这里一台相当强大的机器上，我在 IE8 中没有看到任何停止，只是稍微慢了一点。