使用javascript / jQuery更好地实现淡入淡出的图像交换 [英] A better implementation of a fading image swap with javascript / jQuery

问题描述

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

首先我想说我经历了很多淡入淡出的图像教程和我对不同类型的基本了解。我希望这不会与其他数百个关于渐变图像的问题一起抛出。

这基本上是我想要的：图像渐变成另一幅图像悬停使用JavaScript，最好是jQuery。我会创建两个图像 - 一个名为image.jpg，另一个名为image_o.jpg。它们将驻留在同一个文件夹中。

以下是html标记的样子：

 < img class =imghoversrc =image.jpg/> 
  

javascript会要求我有 imghover 我想要悬停的所有图像上的课程。该脚本会检测第二张图像，名为 imghover_o.jpg ，并将其用于悬停渐变过渡中的第二张图像。

不会有必要的CSS或 background-image 用于转换。

我会有几个图像在网格中，他们都将需要淡入淡出的过渡。 因此，您可以看到我不希望为每个图像创建一个新的CSS类，或者有额外的脚本和html标记，这些将变得麻烦。

以上所有内容均通过此丹尼尔诺兰脚本减去褪色过渡。该脚本只是交换图像而没有淡入淡出，但是它只需要最少的代码即可完美设置。

所以你可以说我只想给Daniel添加一个淡入淡出的过渡诺兰翻转脚本。这是可能的（使用jQuery）吗？

我将在网站上使用它

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

工作演示 h2>

  $（'。fadein'）。each（function（）{
 
 var std = $（this ）.attr（src）; 
 var hover = std.replace（。jpg，_o.jpg）; 
 $（this）.clone（）。insertAfter（this）。 （）; 
 $（this）.mouseenter（'src'，hover）函数（）{
 $（this）.stop（）。fadeTo（600，0）; 
}）。 fadeTo（600，1）; 
}）; 
}）; 
  

或者像：

这

 <$ c $ （）。$（'。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（' （）
 $（this）.mouseenter（）函数（）{
 $（this） .stop（）。fadeTo（600,0）; 
}）。mouseleave（function（）{
 $（this）.stop（）。fadeTo（600，1）; 
} ）; 
}）; 
  

脚本的功能：

• var std = $（this）.attr（src）; 获取SRC属性


• 替换imageRed.jpg with imageRed_o.jpg： var hover = std.replace（。jpg，_o.jpg）;


• 我们不得不将第一个图像封装到 $（this）.wrap（'< div />'）


• 现在我们可以克隆该映像并为其赋予不同的 src ，并将它放在UNDERNEATH中的第一个 .clone（）。insertAfter（这个）.attr（'src'，hover）


• ，我们必须从第二个图像中去掉'.fadein'类（只有第一个图像会） .removeClass（'fadein'）


• 在我们克隆该图片后，我们将图片设置为一个OVER第二个给它一个css位置绝对： .siblings（）。css（{position：'absolute'}）;


• 进入/离开，我们可以玩t的可见度他是第一张图片。

This is less of a specific problem or error but more of a implementation question.

First of I'd like to say that I've been through a lot of fading image tutorials and I have a basic understanding of the different kinds. I hope this doesn't get thrown out along with the other hundreds of questions about fading images.

This is basically what I would like: An image fading into another image on hover using javascript and preferably jQuery. I would create two images—one named image.jpg and another named image_o.jpg. They would reside in the same folder.

Here's what the html markup would look like:

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

The javascript would require me to have the imghover class on all the images that I want to hover. The script would detect the second image named imghover_o.jpg and use it for the second image in the hover fade transition.

There would be no required CSS or background-image for the transition.

I will have several of these images in a grid and they will all need to have the fade transition. So, you can see that I do not want to make a new CSS class for every image, or have extra script and html markup that will get cumbersome.

All of the above is achieved with this Daniel Nolan script minus the fade transition. The script just swaps the image with no fade, but it is set up perfectly with minimal code.

So you could say that I just want add a fade transition to the Daniel Nolan rollover script. Is is possible to remake his script using jQuery?

Is this possible (with jQuery)?

The site I will use it on

解决方案

You can get the src attribute of an image and use .replace() to replace the url on hover!

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

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

What the script does:

• var std = $(this).attr("src"); grab the SRC attribute
• replace the imageRed.jpg with imageRed_o.jpg : var hover = std.replace(".jpg", "_o.jpg");
• Than we had to wrap the first image into an element $(this).wrap('<div />')
• so that now we can clone that image and give it a different src and place it UNDERNEATH the first one .clone().insertAfter(this).attr('src', hover)
• and we have to remove from the second image the class '.fadein' (only the first image will have that class!) .removeClass('fadein')
• after we cloned that image we set the image one OVER the second by assigning it a css position absolute: .siblings().css({position:'absolute'});
• Than on mouse enter/leave we can just play with the visibility of the first image.

这篇关于使用javascript / jQuery更好地实现淡入淡出的图像交换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！