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

这不是特定问题或错误,而是更多的实现问题.

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

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

这是html标记的样子：

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

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

过渡时不需要CSS或背景图像.

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

所有这些都是通过Daniel Nolan script减去淡入淡出过渡来实现的.该脚本只是交换图像没有淡入淡出,但它使用最少的代码完美设置.

所以你可以说我只想添加一个淡入淡出过渡到Daniel Nolan翻转脚本.有可能使用jQuery重制他的脚本吗？

这是可能的(使用jQuery)？

The site I will use it on

解决方法:

您可以获取图像的src属性并使用.replace()替换悬停时的url！

WORKING DEMO

$('.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);
    });
});

或者像：

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_o.jpg替换imageRed.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’});
>比鼠标进/出我们只能玩第一张图像的可见性.

标签：fade,javascript,jquery,hover,rollover
来源： https://codeday.me/bug/20190729/1576897.html