javascript - 如何提高图像交叉淡入淡出性能？

Question

我希望能够对宽度设置为屏幕 100% 的大图像执行交叉淡入淡出过渡。我有一个我想要完成的工作示例。但是，当我在各种浏览器和各种计算机上对其进行测试时，我并没有在所有地方获得黄油般平滑的过渡。

参见 jsFiddle 上的演示:http://jsfiddle.net/vrD2C/

在 Amazon S3 上查看:http://imagefader.s3.amazonaws.com/index.htm

我想知道如何提高性能。这是实际执行图像交换的函数:

function swapImage(oldImg, newImg) {
    newImg.css({
        "display": "block",
        "z-index": 2,
        "opacity": 0
    })
    .removeClass("shadow")
    .animate({ "opacity": 1 }, 500, function () {
        if (oldImg) {
            oldImg.hide();
        }
        newImg.addClass("shadow").css("z-index", 1);
    });
}

使用 jQuery animate() 来改变不透明度是一种糟糕的方式吗？

Answer 1

您可能需要查看 CSS3 Transitions，因为浏览器可能能够比 Javascript 直接在循环中设置属性更好地优化它。这似乎是一个很好的开始:

http://robertnyman.com/2010/04/27/using-css3-transitions-to-create-rich-effects/