使用jQuery animate制作200毫秒交叉淡入的img开关源？

这是我的相关代码，我正在根据单击的位置切换图像。有没有办法让我逐渐切换图像？可能在切换时设置动画？一种淡入淡出

<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>

jQuery（document）.ready（函数（$）{//fire on DOM ready
$（“#mainproductpicture”）.addpowerzoom({
默认功率：2，
功率范围：[2,5]，
大图像：空，
放大镜大小：[200200]/你不能设置
src
属性的动画（我不敢相信我刚刚写了这个）。如果你想让你的图像交叉淡入淡出，你必须把它们一个放在另一个上面，并设置顶部的不透明度的动画

至于你的“重新挂钩”对性能有负面影响：不。这是Javascript应该使用的方式。
你不能设置
src
属性的动画（我不敢相信我刚刚写了这个）。如果你想让你的图像交叉淡入淡出，你必须将它们一个放在另一个上面，并设置顶部的不透明度的动画

至于你的“重新挂钩”对性能的负面影响：不。这是Javascript应该使用的方式。
仅仅因为我是一个坚持者；你可以通过使用更好的选择器减少代码重复来超级简化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>

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

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

然后在调用初始化power zoom插件时：

 $('#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>

剩下的是CSS，用于将两个图像标记对齐到适当的位置。
仅仅因为我是一个坚持者；您可以通过使用更好的选择器减少代码重复来超级简化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>

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

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

然后在调用初始化power zoom插件时：

 $('#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>

剩下的是CSS，用于将两个图像标记对齐到适当的位置。
我之所以选择此选项，是因为您无法设置src属性的动画。通常，您只能设置数字的动画。尽管有一个插件可以让您设置十六进制颜色的动画。我之所以要评论，是因为调用jQuery构造函数（
$
）超出了需要。@sholsinger:注意，他没有询问选择器。这很容易被缓存：
var mainproductpicture=$（“#mainproductpicture”）；
。他特别询问了“重新挂钩”的问题他在元素上的缩放。是的，但他这样做的方式会给脚本的执行增加一些延迟。我建议所有缓存的jQuery对象（
var$foo=$（'#foo'）
）从一个
$
开始，这样你只要看一下就知道它是一个jQuery实例。@sholsinger:Spot on！在我自己的代码中，我的jQuery对象的所有变量名都以一个
$
开始。但是，我不会强迫别人使用我的编码风格；）我之所以这么做，只是因为你不能设置src属性的动画。通常你只能设置数字的动画。虽然有一个插件可以让你设置十六进制颜色的动画。我之所以要评论，是因为调用jQuery构造函数（
$
）会对性能造成负面影响超出需要。@sholsinger:注意，他没有询问选择器。这很容易被缓存：
var mainproductpicture=$（“#mainproductpicture”）；
。他特别询问了“重新挂钩”的问题他在元素上的缩放。是的，但他这样做的方式会给脚本的执行增加一些延迟。我建议所有缓存的jQuery对象（
var$foo=$（'#foo'）
）从一个
$
开始，这样你只要看一下就知道它是一个jQuery实例。@sholsinger:Spot on！在我自己的代码中，我的jQuery对象的所有变量名都以一个
$
开始。但是，我不会强迫别人使用我的编码风格；）非常感谢您花时间写这篇文章。：）我最初使用IDs是因为我不知道$（这个）selector，这应该会清理我的代码。谢谢。@Sergio我刚刚在我的答案正文中添加了一个实际的答案。我希望这会有所帮助。非常感谢你花时间写这篇文章。：）我最初使用ID是因为我不知道$（这个）选择器，这真的应该清理我的代码。谢谢。@Sergio我刚刚在我的答案正文中添加了一个实际的答案。我希望它能有所帮助。