Javascript 使用jQuery将一个图像转换为另一个图像

我使用以下代码：

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

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

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

但是我不满意页面上有500个标签。我希望在用户请求显示时加载它们，如第一个示例中所示。你知道可能会有一些额外的图书馆吗

编辑：

---

我想说的是：不必一张一张地写（比如想象一下500张图片）

你的选择是正确的。这样的转换可以通过两个图像来完成，一个在另一个后面（使用css

absolute

position）。然后，如果希望重用此代码，而不是使用ID，可以使用jQuery选择器，并在隐藏第二个（下一个）图像时显示第一个图像

---

您的选择是正确的。这样的转换可以通过两个图像来完成，一个在另一个后面（使用css

absolute

position）。然后，如果希望重用此代码，而不是使用ID，可以使用jQuery选择器，并在隐藏第二个（下一个）图像时显示第一个图像

---

创建一个fiddle链接那么，你想要的是去掉ID？创建一个fiddle链接那么，你想要的是去掉ID？

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

<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);
});