CODEWITHSUNDEEP
jquery
flinx777
flinx777

Reputation: 597

jQuery image crossfade onhover

So I've been looking for a plugin or jQuery code to drop into a site I'm working on that allows for easy image switches onhover. I found this awesome little tool: http://www.designchemical.com/blog/index.php/jquery/quick-and-easy-jquery-image-swap/ ... does exactly what I need except it switches the image but not crossfade onhover. I know I can create an image that onhover I change the background to fade in an image (i.e. CSS sprites) but have yet to find a plugin as easy as the link above where I can just drop in a class on all the buttons on my site with a default of "_off.jpg" at the end of the image and then have the jQuery change out the "_off.jpg" to "_on.jpg". Unfortunately this site I'm working on has a lot of buttons and having to meticulously create a hover situation with a background change would be so time consuming.

Anyone got any recommendations on jQuery and/or plugins they've found to simply their life?

Thanks!

Upvotes: 0

Views: 825

Answers (2)

Chris Rogers
Chris Rogers

Reputation: 1863

I was going to suggest something along the lines of @Lee - except that it wouldn't be a cross fade, but rather a fadein and out.

Although this doesn't address your desire for an 'easy' drop-in solution, one approach is to have the image enclosed in another element which has the hover image in the background. Then it would be simple to fade in/out the 'off' image, revealing the background 'on' image.

One way to approach this (having to setup these background styles automatically) would be to use JQuery to iterate over all images which have a particalar class, and then set the background image of it's container to the appropriate src (with similar code as you have above for replacing '_off' with '_on'.

Hope that helps.

Upvotes: 0

Lee
Lee

Reputation: 750

If you just want a quick fade effect you can animate the opacity. Doesnt give you a cross-over fade though

$(".img-swap").hover(
    function(){
        this.src = this.src.replace("_off","_on");
        $(this).css({opacity: 0}).animate({opacity: 1},{ queue: false, duration: 'slow' });
    },
    function(){
        this.src = this.src.replace("_on","_off");
        $(this).css({opacity: 0}).animate({opacity: 1},{ queue: false, duration: 'slow' });
});

See demo - http://www.designchemical.com/lab/jquery/demo/jquery_demo_image_swap_fade.htm

Upvotes: 1

Related Questions