Slowly change/fade/animate an image changing with JQuery

Question

This is my img, <img src="one.png" id="one" onMouseOver="animateThis(this)">

I want to slowly change this image src to "oneHovered.png" when the user hovers over using jQuery. Which jQuery method is best to do this? A lot of examples I see want me to change the CSS background. Is there anything to alter the src attribute directly?

Answer 1

You could start by first fading out the image, controlling the duration of the fadeout using the first optional parameter. After the fade out is complete, the anonymous callback will fire, and the source of the image is replaced with the new one. Afterwards, we fade in the image using another duration value, measured in milliseconds:

Original HTML:

<img src="one.png" id="one" />

JavaScript:

$('#one').hover(function() {

    // increase the 500 to larger values to lengthen the duration of the fadeout 
       // and/or fadein
    $('#one').fadeOut(500, function() {
        $('#one').attr("src","/newImage.png");
        $('#one').fadeIn(500);
    });

});

Finally, using jQuery, it's much, much easier to bind JavaScript events dynamically, without using any JavaScript attributes on the HTML itself. I modified the original img tag so that it just has the src and id attributes.

The jQuery hover event will ensure that the function fires when the user hovers over the image with the mouse.

For more reading, also see jQuery fadeOut and jQuery fadeIn.

Possible problems with image load times:

If it's the first time a user has hovered over an image and making a request for it, there may be a slight glitch in the actual fadeIn, since there will be latency from the server while it's requesting newImage.png. A workaround for this is to preload this image. There are several resources on StackOverflow on preloading images.

Answer 2

try this

<img class="product-images-cover" src="~/data/images/productcover.jpg" />
<div class="list-images-product">
 <div>
   <img class="thumbnail" src="~/data/images/product1.jpg" />
 </div>
 <div>
   <img class="thumbnail" src="~/data/images/product2.jpg" />
 </div>
</div>

$(document).ready(function () {
    $(".list-images-product .thumbnail").click(function (e) {
        e.preventDefault();
        $(".product-images-cover").fadeOut(250).attr("src", $(this).attr('src')).fadeIn(250);
    });
});

Answer 3

In addition to @jmort253, it would be nice if you add a min-height before fading out. Otherwise you might see a jerking for responsive images especially.

My suggestion would be

$('#one').hover(function() {
    // add this line to set a minimum height to avoid jerking
    $('#one').css('min-height', $('#one').height());
    // increase the 500 to larger values to lengthen the duration of the fadeout 
       // and/or fadein
    $('#one').fadeOut(500, function() {
        $('#one').attr("src","/newImage.png");
        $('#one').fadeIn(500);
    });

});

Answer 4

When changing the image source through jquery, it takes a loading time, which results in some flickering effects. I modified the above code to solve the issue.

$(".list-images-product .thumbnail").fadeTo(1000,0.30, function() {
  $(".list-images-product .thumbnail").attr("src",newsrc);
  $(".list-images-product .thumbnail").on('load', function(){
    $(".list-images-product .thumbnail").fadeTo(500,1);
  });
 });