使用 jQuery 将一张图片转换为另一张图片答案

【问题标题】：Transition one image to another using jQuery使用 jQuery 将一张图片转换为另一张图片
【发布时间】：2015-07-07 04:44:58
【问题描述】：

我使用以下代码：

  <div style="" id="mainimg"></div>

然后：

$('#button').click(function() {
    $('#mainimg').animate({
        opacity: "0"
    }, function() {
        $(this).css('background-image', 'url(images/corrals/maocorral.png)').animate({
            opacity: "1"
        });
    });
});

它使图像消失为“0”，然后平滑地显示为“1”。有没有办法在不完全消失第一张图像的情况下实现图像之间的淡入淡出？

我找到了一种方法来做到这一点：（使用自定义 css）

<img id="first" src="images/2.png">
<img id="second" src="images/1.png">

脚本：

$('#button').click(function() {
    $('#first').fadeIn(1000);
    $('#second').fadeOut(1000);
},
function() {
    $('#first').fadeOut(1000);
    $('#second').fadeIn(1000);
});

但我不满意页面上有 500 个标签。如果用户请求显示它，我想加载它们，就像在第一个示例中一样。你知道一些额外的库吗？

编辑：我想做这个：https://jsfiddle.net/0fw8zz2g/，而不是在另一个上写（例如，想象 500 张图片）

【问题讨论】：

创建小提琴链接
那么，你想要的是摆脱 ids 吗？

标签： javascript jquery html css image

【解决方案1】：

您走在正确的道路上。像这样的过渡可以通过只有两个图像来完成，一个“在”另一个“后面”（使用 css absolute 位置）。然后，如果您想重用此代码，而不是使用 ID，您可以使用 jQuery 选择器并在隐藏第二个（下一个）图像时显示您的第一个图像。

JSFiddle

【讨论】：