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 script减去淡入淡出过渡来实现的。该脚本只是交换图像而没有淡入淡出，但它使用最少的代码完美设置。

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

这可能（使用jQuery）吗？

The site I will use it on

Answer 1

您可以获取图片的src属性，并使用.replace()替换悬停时的网址！

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'});
与鼠标输入/离开相比，我们可以播放第一张图像的可见性。

Answer 2

这是一个很好的模式：

<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)             
        })                    
});

Answer 3

尝试这样做很容易：

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

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

3 个答案:

WORKING DEMO

THIS