CODEWITHSUNDEEP
jqueryimagereplacehoverswap
Nicholas Smith
Nicholas Smith

Reputation: 13

How to swap images on hover using Jquery and .fadeIn effect?

Title says it all. How do I swap my image on hover using JQuery and the .fadeIn effect?

I have a tag with a B&W image inside of it. When you hover over the link I want the B&W image to be swapped with a color version and fade in. I'm looking for a similar effect as the photos at this website:

http://www.manuelle-gautrand.com/

My naming convention for my B&W images end with _bw while my color images are the same name without the _bw.

Here's my HTML:

<a href="link.html" class="item"><img src="images/cool_restaurant_bw.jpg" alt="Cool Restaurant" width="200" height="300"></a>

JQuery

$(document).ready(function() {
    $(".item").hover( function() {
        $(this).find("img").stop().fadeOut(0, function() {
            $(this).find("img").attr("src", $(this).attr("src").replace("_bw", ""));}).fadeIn(400);
    },
        $(this).find("img").stop().fadeOut(0, function() {
            $(this).find("img").attr("src", $(this).attr("src") + "_bw");}).fadeIn(0);
    );
});

My code isn't working. Any advice?

Thanks all in advance

Upvotes: 1

Views: 1990

Answers (2)

Tims
Tims

Reputation: 2007

Unless you use an image preloader you will run into problems with loading when changing the src.

Better to load all images (note the display:none; on the top image).

Then use the jQuery toggle() and fadeIn() fadeOut() functions.
If you don't want the white flash at the start of hover (which is the same as the link you posted) then you can remove the toggle() statements. 

$(".item").hover(
  function() {
    // fade in
    $(this).find('.bottom-image').toggle(0);
    $(this).find('.top-image').fadeIn(500);
  }, function() {
    //fade out
    $(this).find('.bottom-image').toggle(0);
    $(this).find('.top-image').fadeOut(500);
  }
);
.bottom-image,
.top-image {
  position: absolute;
}

.bottom-image {
  background-color: #777;
}
.top-image {
  display: none;
  background-color: #33a;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<a href="link.html" class="item">
  <img src="images/cool_restaurant_bw.jpg" alt="Cool Restaurant" width="200" height="300" class="bottom-image">
  <img src="images/cool_restaurant.jpg" alt="Cool Restaurant" width="200" height="300" class="top-image">
</a>

Upvotes: 1

Niffler
Niffler

Reputation: 1710

I would do one thing a little differently, and that is to make the color-image the background image of the link instead of exchanging the sources. If you exchange the sources it won't be able to fade from one image into the other - for that to be possible, they both have to be there at the same time.

Instead, I would add a little function that goes through all your images and sets the color-images as background images:

$('.item').each(
    function() {
        var colorbg = $(this).find('img').attr('src').replace("_bw", "");
        $(this).css('background', 'url(' + colorbg + ')');
    }
);

You'll also have to add some CSS to the link:

.item {
    display: block;
    height: 300px;
    width: 200px;
}

Then you can just animate the image to fade in and out the way you want on hover:

$('.item').hover(
    function() {
        $(this).stop().animate({"opacity": "0"}, 0);
        $(this).find('img').stop().animate({"opacity": "0"}, 0);
        $(this).stop().animate({"opacity": "1"}, 500);
    },
    function() {
        $(this).find('img').stop().animate({"opacity": "1"}, 0);
    }
);

(The function above makes first both the link and the image "invisible", then fades in the link i.e. the color-image.)

Here's a fiddle (using different picture sources): http://jsfiddle.net/Niffler/Lvpx9h3j/

Upvotes: 1

Related Questions