使用 jQuery 动画制作具有 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 切换到另一个图像时，缩放保持在第一个图像上。所以我每次点击都会将库“重新连接”到图像上。 我不知道这是否会对性能造成负面影响？当前一代会在我之后正确清理吗？

Answer 1

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

至于您的“重新挂钩”对性能造成负面影响：不。这是应该使用 Javascript 的方式。

Answer 2

仅仅因为我是一个固执己见的人；您可以通过使用更好的选择器来减少代码重复，从而超级简化您的 JS 代码。您可以使用逗号将选择器链接起来。

<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, #smallpicturetwo, #smallpicturethree, #smallpicturefour, #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>

但您可以通过完全不针对这些 id 而使用类来做得更好。例如：

$('.smallpicture').click(function(){ /* ... */ });

您还可以通过事先声明“addpowerzoom”选项并重用变量引用来减少重复。例如：

var powerZoomOpts = {
  defaultpower: 2,
  powerrange: [2, 5],
  largeimage: null,
  magnifiersize: [200, 200]
};

然后在您的调用中初始化电动缩放插件：

 $('#mainproductpicture').addpowerzoom(powerZoomOpts);

但是等等！还有更多。您还可以在此之前将 powerzoom 链接到attr() 呼叫上。例如：

$("#mainproductpicture").attr("src", $(this).attr("src")).addpowerzoom(powerZoomOpts);

对于最终结果：

<script type="text/javascript">
jQuery(document).ready(function ($) { //fire on DOM ready
    var powerZoomOpts = {
        defaultpower: 2,
        powerrange: [2, 5],
        largeimage: null,
        magnifiersize: [200, 200]
    };

    $('#mainproductpicture').addpowerzoom(powerZoomOpts);

    $('.smallpicture').click(function () {
        $("#mainproductpicture").attr("src", $(this).attr("src")).addpowerzoom(powerZoomOpts);
    });
});
</script>

这样看起来是不是好多了？

为了交叉淡入淡出（正如其他人所说），您必须有两个 img 元素。一个位于另一个之上。底部的图像应该开始被顶部的图像隐藏起来。它还没有src 属性。

第二步，把底部img的src改成你要淡入淡出的图片。然后你.fadeOut(200) 上图。使用回调函数将顶部图像的 src 属性更改为底部图像的 src 属性，以便为下一次淡入淡出“准备”一组图像。

这是一个例子：

var $topimg = $('#topimage');
var $bottomimg = $('#bottomimage'); /* cache $topimg & $bottomimg jQuery objects for later use */

$('.fadeable-images').click(function(e){
  $bottomimg.attr('src', $(this).attr('src'));
  $topimg.fadeOut(200, function(){
    $topimg.attr('src', $bottomimg.attr('src')).show();
  });
});

剩下的就是 CSS 来将两个图片标签对齐到合适的位置。