jquery - 使用 jQuery animate 制作具有 200 毫秒交叉淡入淡出效果的 img 切换源？

Question

这是我的相关代码，我根据点击的位置切换图像。有什么方法可以让我逐渐切换图像吗？也许在切换时为它们设置动画？一种淡入淡出。

<script type="text/javascript">
    jQuery(document).ready(function ($) { //fire on DOM ready
        $('#mainproductpicture').addpowerzoom({
            defaultpower: 2,
            powerrange: [2, 5],
            largeimage: null,
            magnifiersize: [200, 200] //<--no comma following last option!
        })

        $('#smallpictureone').click(function () {
            $("#mainproductpicture").attr("src", $(this).attr("src"));

            $('#mainproductpicture').addpowerzoom({
                defaultpower: 2,
                powerrange: [2, 5],
                largeimage: null,
                magnifiersize: [200, 200] //<--no comma following last option!
            })
        });

        $('#smallpicturetwo').click(function () {
            $("#mainproductpicture").attr("src", $(this).attr("src"));

            $('#mainproductpicture').addpowerzoom({
                defaultpower: 2,
                powerrange: [2, 5],
                largeimage: null,
                magnifiersize: [200, 200] //<--no comma following last option!
            })
        });

        $('#smallpicturethree').click(function () {
            $("#mainproductpicture").attr("src", $(this).attr("src"));

            $('#mainproductpicture').addpowerzoom({
                defaultpower: 2,
                powerrange: [2, 5],
                largeimage: null,
                magnifiersize: [200, 200] //<--no comma following last option!
            })
        });

        $('#smallpicturefour').click(function () {
            $("#mainproductpicture").attr("src", $(this).attr("src"));

            $('#mainproductpicture').addpowerzoom({
                defaultpower: 2,
                powerrange: [2, 5],
                largeimage: null,
                magnifiersize: [200, 200] //<--no comma following last option!
            })
        });

        $('#smallpicturefive').click(function () {
            $("#mainproductpicture").attr("src", $(this).attr("src"));

            $('#mainproductpicture').addpowerzoom({
                defaultpower: 2,
                powerrange: [2, 5],
                largeimage: null,
                magnifiersize: [200, 200] //<--no comma following last option!
            })
        });
    });
</script>

我还有另一个关于我的 JavaScript 代码的相关问题。我正在使用我在网上找到的一个 Javascript 库，它允许我很好地缩放图像。但是，当我将 src 切换到另一个图像时，缩放仍保留在第一个图像上。因此，每次单击时，我都会将库“重新 Hook ”到图像。 这是否会对我的性能造成负面影响？当前一代人会在我之后正确清理吗？

Answer 1

您无法为 src 属性设置动画(我不敢相信我刚刚写了这个)。如果您希望图像交叉淡入淡出，则必须将它们放在另一张的上面，并设置顶部图像的不透明度动画。

至于你的“重新 Hook ”对性能造成了负面影响:不。这才是 Javascript 应该使用的方式。