Как перенести изображения вправо с помощью мыши, используя 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, и возвращаю его нормальный размер на мыши. Мне интересно, как бы я сделал это так, чтобы, когда я навел указатель на миниатюру, он будет анимировать справа от моей галереи фотографий. Я также обеспокоен использованием метода replace, потому что считаю, что если я переместил изображение, которое я увеличил вправо, функция автоматически распознает, что моя мышь оставила изображение и вернулась к меньшей версии изображения. С помощью метода replace мой эскиз под большим изображением и просто невидим или это на самом деле, как следует из названия метода, будучи замененным?

Вот мой 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 структуры. Элемент table предназначен для хранения содержимого в аккуратных столбцах/строках, то есть упорядочение элементов в нем имеет смысл. Это не очень хороший элемент для анимации, такой как это, однако, если вам нужно переместить изображение вправо, я бы использовал свойство margin окружающего элемента для смещения изображений вправо (постепенно применяя левое поле на элемент a). В общем, я считаю, что лучше всего урезать структуру таблицы для подобных вещей в пользу относительно позиционированного div, содержащего все элементы изображения в абсолютном позиционировании. Это даст вам самый чистый контроль над элементами для анимации.

Что касается функции замены, это для обработки текста и фактически ничего не делает для источников изображения. Вы устанавливаете источники изображений в свой код выше, когда используете функцию $(). Attr(), то, что заменит, это изменение строки src в указанном вами формате. Как только вы меняете источник на этом элементе изображения (используя $ .attr() fn), миниатюра удаляется из структуры HTML документа (однако сохраняется в кэше в памяти), и загружается полноразмерная версия. Когда вы возвращаете исходный код элемента изображения обратно в миниатюрную версию, это происходит и с полноразмерной версией изображения.

Надежда, что помогает :)