Question

我使用以下代码：

  <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个图像）

Answer 1

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

JSFiddle

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

1 个答案: