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

The above is the jquery code that I am using now. It makes any image I have enlarge on mouseenter and return to it's normal size on mouseleave. I am wondering how I would make it so that when I mouseenter a thumbnail it would animate to the right of my gallery of photos. I am also worried of using the replace method because I believe that if I move the image that I enlarged to the right the function will automatically recognize that my mouse has left the image and revert to the smaller version of the image. By using the replace method is my thumbnail beneath the larger image and just invisible or is it actually as the name of the method implies, being replaced?

Here is my 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>
4

1 回答 1

1

关于将鼠标悬停的图像设置为向右移动的动画，您的 HTML 结构可能会遇到一些问题。表格元素旨在将内容保存在整齐的列/行中，即其中项目的顺序是有意义的。对于这样的动画来说，这并不是一个很好的元素，但是如果您需要将图像向右移动，我将使用周围元素的 margin 属性将图像向右移动（通过逐渐应用左边距a 元素）。一般来说，我认为最好为这样的事情放弃表格结构，转而使用相对定位的 div，其中包含绝对定位的所有图像元素。这将使您对动画元素进行最清晰的控制。

至于替换功能，这是用于文本操作，实际上对图像源没有任何作用。当您使用 $().attr() 函数时，您在上面的代码中设置图像源，replace 所做的是将 src 字符串更改为您指定的格式。只要您更改了该图像元素的源（使用 $.attr() fn），缩略图就会从文档的 HTML 结构中删除（但仍保留在内存中缓存）并加载完整大小的版本。当您将图像元素上的源重置回缩略图版本时，图像的完整尺寸版本也会发生同样的情况。

希望有帮助:)

于 2013-07-29T01:32:51.883 回答