使用 javascript / jQuery 更好地实现褪色图像交换答案

【问题标题】：A better implementation of a fading image swap with javascript / jQuery使用 javascript / jQuery 更好地实现褪色图像交换
【发布时间】：2011-11-11 15:09:37
【问题描述】：

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

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

这基本上是我想要的：使用 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 script 减去淡入淡出过渡来实现的。该脚本只是在不褪色的情况下交换图像，但它使用最少的代码完美设置。

所以你可以说我只想为 Daniel Nolan 翻转脚本添加一个淡入淡出过渡。是否可以使用 jQuery 重新制作他的脚本？

这可能吗（使用 jQuery）？

The site I will use it on

【问题讨论】：

Daniel Nolan 脚本的问题在于它只是交换文件名。您需要有两张图像，一张在另一张上，然后更改前面一张的不透明度。这是一个完全不同的问题。他的剧本不适合你的目的。

标签： javascript jquery hover fade rollover

【解决方案1】：

您可以获取图片的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.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'});
与鼠标进入/离开相比，我们可以只使用第一张图片的可见性。

【讨论】：

非常感谢！这些是我在 stackoverflow 上得到的最好的回应！你帮了我很多忙！

【解决方案2】：

试着像这样简单：

 $('#img').hover(
     function() {
       $(this).stop().fadeIn(...).attr('src', 'image_o').fadeOut(...)
     }, 
     function() {
       $(this).stop().fadeIn(...).attr('src', 'image').fadeOut(...)
 });

【讨论】：

【解决方案3】：

这是一个不错的模式：

<img src="http://i.imgur.com/vdDQgb.jpg" hoverImg="http://i.imgur.com/Epl4db.jpg">

JS：

$('body').find('*[hoverImg]').each(function(index){
    $this = $(this)
    $this.wrap('<div>')     
    $this.parent().css('width',$this.width())  
    $this.parent().css('height',$this.width())
    $this.parent().css('background-image',"url(" + $this.attr('hoverImg')+")")
        $this.hover(function() {
            $(this).stop()
            $(this).fadeTo('',.01)    
        },function() {
            $(this).stop()
            $(this).fadeTo('',1)             
        })                    
});

【讨论】：