使用 jQuery 动画制作具有 200 毫秒交叉淡入淡出的 img 切换源？

Posted 2023-05-08

【中文标题】使用 jQuery 动画制作具有 200 毫秒交叉淡入淡出的 img 切换源？

【英文标题】：Making an img switch source with a 200ms crossfade using jQuery animate?

【发布时间】：2011-10-27 14:14:41

【问题描述】：

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

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

【参考方案1】：

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

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

【讨论】：

我赞成这个只是因为你不能为 src 属性设置动画。通常，您只能为数字的事物设置动画。虽然有一个插件可以让您为十六进制颜色设置动画。我评论的原因是因为调用 jQuery 构造函数 ($) 对性能有负面影响。

@sholsinger：请注意，他没有询问选择器。这很容易被缓存：var mainproductpicture = $('#mainproductpicture');。他特别询问了如何将他的缩放器“重新连接”到元素上。

没错，但他这样做的方式是给脚本的执行增加了一些延迟。我建议任何缓存的 jQuery 对象 (var $foo = $('#foo')) 都以 $ 开头，这样你就知道它是一个 jQuery 实例。

@sholsinger：准点！在我自己的代码中，我所有的 jQuery 对象的变量名都以$ 开头。但是，我不会将我的编码风格强加给其他任何人；）

【参考方案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 来将两个图片标签对齐到合适的位置。

【讨论】：

非常感谢您花时间写这篇文章。 :) 我最初使用 ID 是因为我不知道 $(this) 选择器，这真的应该清理我的代码。谢谢。

@Sergio 我刚刚在我的答案正文中添加了一个实际答案。我希望它有所帮助。