JQuery анимировать на изображение

Question

Я хочу сделать то же самое в моем магазине: http://www.templatemonster.com/demo/34477.html

Пожалуйста, наведите курсор мыши на любую сумку.Как вы можете видеть, краткое описание с розовым фоном скользит снизу.

Вот где я сейчас нахожусь: http://jsfiddle.net/THwuT/

У 3 лучших продуктов почти есть, но одинвнизу показывается описание первого.Это произошло потому, что я дал им позицию: абсолютную, но я понятия не имею, как это сделать без этого.

Answer 1

Вот новая версия вашей скрипки с некоторыми исправленными вещами (мне очень жаль, что я нажал update вместо fork: $). Проблема, с которой вы столкнулись, заключалась в том, что вы не поместили относительное положение в контейнеры .product (каждый раз, когда у вас есть родитель с относительным положением, абсолютное положение будет выравниваться в соответствии с этим родителем вместо страницы).
Также я поместил методы mouseenter / mouseleave вместо старых в .prod divs, потому что когда вы наводили курсор мыши на деск, это имело странный эффект. И я убрал slideUp / down для анимации, потому что остановка может испортить эту функцию.
Чтобы создать эффект этого сайта, вам нужно добавить высоту к контейнерам продукта, скрыть переполнение и анимировать верхнюю часть сообщения вместо высоты. Здесь есть скрипка с этими изменениями скрипка .

Answer 2

Попробуйте этот код jquery animate проблема очистит

http://jsfiddle.net/THwuT/62/