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

演示