Add a jquery fade effect to specific img hover script

Question

it might be simple but I can't find the solution. Is it possible (in a easy way!) to add a jquery fadeIn and fadeOut effect to this image hover sript?

$('img[data-hover]').hover(function() {
    $(this)
        .attr('tmp', $(this).attr('src'))
        .attr('src', $(this).attr('data-hover'))
        .attr('data-hover', $(this).attr('tmp'))
        .removeAttr('tmp');
}).each(function() {
    $('<img />').attr('src', $(this).attr('data-hover'));
});


<img src="image1.jpg" data-hover="image2.jpg">

Answer 1

You might want to take a look at this:

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

I think this is what you want ?

$("img.a").hover(
    function() {
      $(this).stop().animate({"opacity": "0"}, "slow");
    },
    function() {
      $(this).stop().animate({"opacity": "1"}, "slow");
    });
});

HTML:

<img src="image1.jpg" alt="" class="a" />
<img src="image2.jpg" alt="" class="b" />

Answer 2

Set the img tag to the desired starting opacity using CSS, and add this to your code:

$('img[data-hover]').mouseover(function() {
    $(this).fadeTo("slow", 1);
}

$('img[data-hover]').mouseout(function () {
    $(this).fadeTo("slow", 0.25); // where 0.25 is the desired starting opacity
}

Take a look at the .fadeTo() API documentation since you will probably want to tweak this.