How do I move images to the right on mouseover using 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);
    });
});

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>

Answer 1

Regarding animating the moused over image to move to the right you might run into some problems with your HTML structure. The table element is designed to hold content in neat columns/rows, that is the ordering of items in it is meaningful. It's not really a good element to use for animations such as this however if you need to move an image to the right I would use the margin property of the surrounding a element to shift the images to the right (by gradually applying a left margin on the a element). In general I think its better to ditch the table structure for things like this in favor of a relatively positioned div containing all the image elements in absolute positioning. This will give you the cleanest control over the elements for animating.

As for the replace function this is for text manipulation and doesn't actually do anything to the image sources. You set the image sources in your above code when you use the $().attr() function, what replace does is change the src string to the format you specify. As soon as you change the source on that image element (using the $.attr() fn), the thumbnail is removed from the HTML structure of the document (however still kept cached in memory) and the full size version is loaded. When you reset the source on the image element back to the thumbnail version the same happens with the full size version of the image.

Hope that helps :)