如何使用jquery將鼠標懸停在右側的圖像？

Question

$(document).ready(function() { 
    $('#tapaintings a img').mouseenter(function() { 
     var fileNameForSrc = $(this).attr("src").replace(/^.*[\\\/]/, ''); 
     $(this).attr("src", "images/" + fileNameForSrc); 
    }); 
    $('#tapaintings a img').mouseleave(function() { 
     var fileNameForSrc = $(this).attr("src").replace(/^.*[\\\/]/, ''); 
     $(this).attr("src", "images/thumbnails/" + fileNameForSrc); 
    }); 
}); 

以上是我現在使用的jQuery代碼。它使我在mouseenter上放大的任何圖像在mouseleave上恢復到正常大小。我想知道如何做到這一點，以便當我mouseenter縮略圖時，它會動畫到我的照片庫的右側。我也擔心使用替換方法，因爲我相信，如果我將向右放大的圖像移動到右側，該功能將自動識別出我的鼠標已經離開圖像並恢復爲較小版本的圖像。通過使用替換方法，我的縮略圖位於較大的圖像下方，僅僅是不可見的，或者它實際上是方法名稱的含義，被替換？

這裏是我的html：

<table id="tapaintings"> 
      <tr> 
       <td><a id="painting1" href="images/painting1.jpg" rel="shadowbox[paintings]" title="painting1"> <img src="images/thumbnails/painting1.jpg" alt="painting"></a></td> 
       <td><a id="painting2" href="images/painting2.jpg" rel="shadowbox[paintings]" title="painting2"> <img src="images/thumbnails/painting2.jpg" alt="painting"></a></td> 
      </tr> 
      <tr> 
       <td><a id="painting3" href="images/painting3.jpg" rel="shadowbox[paintings]" title="painting3"> <img src="images/thumbnails/painting3.jpg" alt="painting"></a></td> 
       <td><a id="painting4" href="images/painting4.jpg" rel="shadowbox[paintings]" title="painting4"> <img src="images/thumbnails/painting4.jpg" alt="painting"></a></td> 
      </tr> 
      <tr> 
       <td><a id="painting5" href="images/painting5.jpg" rel="shadowbox[paintings]" title="painting5"> <img src="images/thumbnails/painting5.jpg" alt="painting"></a></td> 
       <td><a id="painting6" href="images/painting6.jpg" rel="shadowbox[paintings]" title="painting6"> <img src="images/thumbnails/painting6.jpg" alt="painting"></a></td> 
      </tr> 
     </table> 

Answer 1

關於動畫的鼠標滑過圖片移動到你可能會遇到一些問題，你的HTML結構的權利。表格元素被設計爲將內容保存在整齊的列/行中，也就是說，其中的項目排序是有意義的。這不是一個很好的元素用於這樣的動畫，但是如果您需要將圖像移動到右側我將使用周圍元素的margin屬性將圖像向右移動（通過逐漸將左邊距應用於a元素）。一般來說，我認爲它更好地拋棄這種表格結構來支持相對定位的div，其中包含絕對定位中的所有圖像元素。這將使您對動畫元素進行最清晰的控制。

至於替換功能，這是用於文本處理，實際上並沒有對圖像源做任何事情。使用$（）。attr（）函數時，您可以在上面的代碼中設置圖像源，替換功能是將src字符串更改爲您指定的格式。只要更改該圖像元素上的源代碼（使用$ .attr（）fn），縮略圖就會從文檔的HTML結構中刪除（但仍然保留在內存中），並加載完整大小的版本。將圖像元素上的源重置爲縮略圖版本時，圖像的全尺寸版本也會發生同樣的情況。

希望幫助:)