HTML image rollover : fade in to the left or right

Question

Im using this code to make mouse over changing button

got the code from this website

http://helplogger.blogspot.com/2012/05/create-rollover-image-effect-change.html

Code im using:

<a href="Blog"><img src="images/menu/dflt_blog_btn.png" onmouseover="this.src='images/menu/rlovr_blog_btn.png'" onmouseout="this.src='images/menu/dflt_blog_btn.png'" /></a>

Is it possible to make it fade in, rather than just change over? if so how can i do it?

this might be stupid but if we can make it fade in can we make it fade in to the left or right ????

Answer 1

You can do it by using,

  $(document).ready(function(){
     $('a').hover(function(){
          $(this).stop().find('img').hide()
          .attr('src','img1.jpg').fadeIn();
      },function(){
          $(this).stop().find('img').hide()
          .attr('src','img2.jpg').fadeIn();
     });
  })

DEMO