使用 javascript / jQuery 更好地实现淡入淡出图像交换

这不是一个具体的问题或错误，而是一个实施问题。

首先我想说，我已经看过很多褪色图像教程，并且对不同类型有基本的了解。我希望这个问题不会与其他数百个有关图像褪色的问题一起被抛弃。

这基本上就是我想要的：使用 javascript（最好是 jQuery）悬停时图像淡入另一个图像。我将创建两个图像 - 一个名为 image.jpg，另一个名为 image_o.jpg。它们将驻留在同一文件夹中。

html 标记如下所示：

<img class="imghover" src="image.jpg" />

javascript 需要我有imghover我想要悬停的所有图像的类。该脚本将检测名为imghover_o.jpg并将其用于悬停淡入淡出过渡中的第二个图像。

不需要 CSS 或background-image为了过渡。

我将在网格中放置几张这样的图像，它们都需要进行淡入淡出过渡。所以，你可以看到我不想为每个图像创建一个新的 CSS 类，或者有额外的脚本和 html 标记，这会变得很麻烦。

以上都是通过这个实现的丹尼尔·诺兰 剧本减去淡入淡出过渡。该脚本只是交换图像而没有褪色，但它是用最少的代码完美设置的。

所以你可以说我只想在丹尼尔·诺兰翻转脚本中添加淡入淡出过渡。是否可以使用 jQuery 重新制作他的脚本？

这可能吗（使用 jQuery）？

我将使用它的网站

您可以获得src图像的属性和用途.replace()替换悬停时的网址！

工作演示

$('.fadein').each(function() {

    var std = $(this).attr("src");
    var hover = std.replace(".jpg", "_o.jpg"); 
    $(this).clone().insertAfter(this).attr('src', hover).removeClass('fadein').siblings().css({
        position:'absolute'
    });
    $(this).mouseenter(function() {
        $(this).stop().fadeTo(600, 0);
    }).mouseleave(function() {
        $(this).stop().fadeTo(600, 1);
    });
});

Or like:

THIS

$('.fadein').each(function() {  
    var std = $(this).attr("src");
    var hover = std.replace(".jpg", "_o.jpg");
    $(this).wrap('<div />').clone().insertAfter(this).attr('src', hover).removeClass('fadein').siblings().css({
        position:'absolute'
    });
    $(this).mouseenter(function() {
        $(this).stop().fadeTo(600, 0);
    }).mouseleave(function() {
        $(this).stop().fadeTo(600, 1);
    });
});

该脚本的作用：

• var std = $(this).attr("src");获取SRC属性
• 将 imageRed.jpg 替换为 imageRed_o.jpg ：var hover = std.replace(".jpg", "_o.jpg");
• 我们必须将第一张图像包装到一个元素中$(this).wrap('<div />')
• 现在我们可以克隆该图像并给它一个不同的src并将其放在第一个的下方.clone().insertAfter(this).attr('src', hover)
• 我们必须从第二个图像中删除“.fadein”类（只有第一个图像才会有该类！）.removeClass('fadein')
• 克隆该图像后，我们通过为其指定 css 绝对位置来将图像设置为第二个图像：.siblings().css({position:'absolute'});
• 与鼠标进入/离开相比，我们可以只玩第一张图像的可见性。