jquery hover image fade swap

Question

I have been searching online for awhile, trying to find the best way to write a jquery script that does this simple task: swapping an image on hover with an elegant fade effect. I have found many solutions (some way to cumbersome and clunky), and narrowed it down to what I see as the two best:

http://designwoop.com/2009/08/image-hover-effect-using-jquery-tutorial/

http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/

For my purposes, I want to be able to do this hover swap numerous times on one page. The page is http://www.vitaminjdesign.com. I currently have hovers on my "services nav" (different type of hover) but I want to apply them to all of the nav buttons, as well as the social icons in the footer. All of the hovers will be the same- two image files, one fading in to the other on hover, and returning on leave. What is the best possible way to go about this? One of the above links perhaps?

Answer 1

You could also accomplish this using a single background image, and fading in & out a transparent div. Here's a quick example, which could be extended to work automatically for a single class of image:

$(document).ready( function() {
    $("#mask-div")
        .css({
          "position": "absolute",
          "width": 275,
          "height": 110,
          "background": "rgba(255, 255, 255, 0.5)"
        })
        .mouseover( function() {
             $(this).fadeOut("slow");
        })
    ;
    $("#test-img").mouseout( function() {
        $("#mask-div").fadeIn("slow");
    });
});

Running demo can be seen at jsbin: demo-one

UPDATE: Here is a more generic solution (incomplete, but shows some ideas): demo-two . Just add the class "fade-img" to any image you want to have this effect.

$(document).ready( function() { 
    $(".fade-img") 
        .before("<div class='fade-div'></div>") 
        .each( function() { 
            var img = $(this); 
            var prev = img.prev(); 
            var pos = img.offset(); 

            prev.css({ "height": img.height(), "width": img.width(), "top": pos.top, "left": pos.left }) 
                .mouseover( function() { 
                    $(this).fadeOut("slow"); 
                } 
            ); 
        }) 
        .mouseout( function() { 
            $(this).prev().fadeIn("slow"); 
        }) 
    ; 
});

Answer 2

I opt for the solution in the second link you provided. It is short, clean and simple.

• Create two <img> tags
• Position one exactly over the other (CSS with z-index)
• On hover fade the opacity of the image with higher z-index to 0
• This makes it transparent and you see the underlying image
• When hover ends fade opacity to 1 again.

Done

Answer 3

inside $(document).ready()

$('.imgbuttonclass').hover(function(){
    $(this).animate({
        backgroundImage: 'img2.png'
    },500);
},function(){
    $(this).stop(true).animate({
        backgroundImage: 'img1.png'
    },500);
});

edit

if you only want to do this: http://designwoop.com/2009/08/image-hover-effect-using-jquery-tutorial/

then use jthompson's answer or just use the code from that page. if you want to use two separate images, you may want to have a look at this:

http://peps.ca/blog/easy-image-rollover-script-with-jquery/

and the demo

what it does is

It looks through the document for any “img” or “input” tags with a class of “ro”. The rollover image needs to be named the same as the normal image but with “_o” at the end. For example, the rollover image for “image.gif” will be “image_o.gif”. After finding all the image tags, the script preloads all of the rollover images and ads the “mouseover” and “mouseout” events.

Answer 4

Image Cross Fade Transition with jQuery explains some ways to approach this ..

Answer 5

I think this is the best method because it uses CSS Sprites to achieve the effect. The tutorial and demo both illustrate how to achieve this using CSS3 as well as jQuery. Check it out below:

http://css-tricks.com/fade-image-within-sprite/