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

Question

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

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

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

这是html标记的样子:

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

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

没有必需的CSS或background-image过渡.

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

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

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

这是可能的(使用jQuery)？

我将使用它的网站

Answer 1

您可以获取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);
    });
});

或者像:

这个

$('.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'});
• 比鼠标进入/离开我们可以玩第一张图像的可见性.