A better implementation of a fading image swap with javascript / jQuery

Question

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

Answer 1

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.

Answer 2

Here's a nice pattern:

<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

try to do it easy like this:

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