image transition for javascript

Question

I have an image tag that can change image once hovered over. I would like to make this transition smooth. Something like a fade into the next image. This is the code I have now:

$('img').bind('mouseenter mouseleave', function() {
    $(this).attr({
        src: $(this).attr('data-other-src') 
        , 'data-other-src': $(this).attr('src') 
    })
});

I am a total beginner for javascript

Answer 1

change the ms values for faster/slower transition, fades out then back in

 $('img').bind('mouseenter mouseleave', function() { var self = $(this); self.fadeTo(1000, 0.30, function() { self.attr({ src: self.attr('data-other-src'), 'data-other-src': self.attr('src') }); }).fadeTo(500, 1); }); 

Answer 2

Replacing the src attribute is "brutal": you cannot transition that.

In order to do this, you need your 2 images exist in the DOM at least during the transition.