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

Transition one image to another using jQuery

本文关键字：图像 一个 转换 另一个 jQuery 使用      更新时间：2023-09-26

我使用以下代码:

  <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图像为例)

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

JSFiddle

相关文章：