HTML图像翻转：向左或向右淡入

Question

我正在使用此代码使鼠标悬停在更改按钮上

从该网站获得了代码

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

即时通讯使用：

<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>

是否可以使其淡入淡出，而不是仅仅转换过来？ 如果可以，我该怎么办？

这可能是愚蠢的，但是如果我们可以使其淡入，我们可以使其向左或向右淡入吗？

Answer 1

您可以使用

  $(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();
     });
  })

演示