使用jQuery动画制作一个200ms交叉渐变的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切换到另一个图像时,缩放保留在第一个图像上.因此,每次点击我都会将图书馆重新挂钩.这是否有我不知道的负面影响？我之后会正确清理当前的一代吗？

Answer 1

你不能动画src属性(我简直不敢相信我写的那个).如果您希望图像交叉淡入淡出,则必须将它们放在另一个图像的顶部,并为顶部图像的不透明度设置动画.

至于你的"重新挂钩"有一个负面的性能命中:不.这是应该使用Javascript的方式.