плавное изменение размера изображения

[cyklop77]

помогите пожалуйста создать эффект при наведении как на этойстранице в блоке .item

здесья примитивно повторил нужную часть кода, но эффект реализовать не могу. в моём случае при наведении всплывающее изображение только плавно меняет прозрачность, а нужно чтобы изменялся размер - от меньшего к большему(от изменения прозрачности можно даже отказаться)

всплывающее изображение должно остаться именно такое, какое сеичас в моей версии - попугайское кольцо

пробовал разобраться как организован эффект на указанном сайте, но не получается. к тому же там немного другой случай - не картинка, а border

[moron]

Поговнокодив решил задачу "плавное изменение размера изображения" вот так : http://jsfiddle.net/wrJtJ/1/ . Реализация не лучшая..

[cyklop77]

Поговнокодив решил задачу "плавное изменение размера изображения" вот так : http://jsfiddle.net/wrJtJ/1/ . Реализация не лучшая..

тут даже говнокодить не стоило так утончённо. всё то же самое делается при помощи двух строчек с animate()

НО мне нужно сделать так, чтобы увеличивающееся изображение всегда было центрировано по вертикали и по горизонтали. в этом главная проблема

Edited September 7, 2012 by cyklop77

[Viper]

вариант без js:

_http://jsfiddle.net/webviper/PWLsv/4/ (update)

П.С. Transform есть смысл оставлять только для webkit - в других тормозит) Для адекватной работы(без анимации) в IE нужно немного изменить размеры.

А вообще, интересная задачка, поэкспериментировал...)

Edited September 7, 2012 by Viper

[moron]

НО мне нужно сделать так, чтобы увеличивающееся изображение всегда было центрировано по вертикали и по горизонтали. в этом главная проблема

http://jsfiddle.net/wrJtJ/6/ - лишний элемент обертка и говнокод собственного про-ва(но когда-нибудь я научусь писать красивые скрипты)Ie не может искать элементы по классу, но можно получать весь список элементов и проверять какие из них имеют класс wrapperImg. Получив массив элементов с классом wrapperImg им всем довольно просто можно присвоить мои обработчики событий...

animate()

Я не пользуюсь фреймворками. Или это не фм?

—

изменил 'искать элементы по тегу' на 'искать элементы по классу'

Edited September 7, 2012 by moron

[Viper]

Ie не может искать элементы по тегу

Разве js свойство - tagName не работает в IE?

[moron]

className я описался, tagName в скрипте вообще не используется.

Edited September 7, 2012 by moron

[cyklop77]

спасибо всем за ответы

Viper, скажи пожалуйста почему тень от всплывающего изображения стала такая резкая?

moron, да, animate это функция jquery

[Viper]

Viper, скажи пожалуйста почему тень от всплывающего изображения стала такая резкая?

Это тень(box-shadow) от блока, а не от изображения, если я правильно тебя понял) Эт я так "игрался", эксперементировал

Немного переделал(убрал тень и увеличил размеры круга):

_http://jsfiddle.net/webviper/PWLsv/6/

Edited September 7, 2012 by Viper

[cyklop77]

Viper, скажи пожалуйста почему тень от всплывающего изображения стала такая резкая?

Это тень(box-shadow) от блока, а не от изображения, если я правильно тебя понял) Эт я так "игрался", эксперементировал

Немного переделал(убрал тень и увеличил размеры круга):

_http://jsfiddle.net/webviper/PWLsv/6/

блин прикольно. даже не подумал бы, что такое без js можно сделать

[amelice]

Тоже предлагаю свой вариант, в моем варианте используется жесткие данные для margin-top , margin-left , думаю можно их расчитать вычислив width() и height() изображения.

http://jsfiddle.net/5f4pk/1/

UPD: http://jsfiddle.net/5f4pk/3/ (добавила .stop() чтоб остановить предыдущие события)

А вообще, интересная задачка, поэкспериментировал...)

+

для меня в оригинальном варианте, не было понятно- почему маргин и паддинг увеличивается/уменьшается без дергания самого блока. Оказывается, у родителя дисплей выставлен инлайн.

До конца не могу понять поведение блоков между собой и внутри блока с таким представлением? Можете обяснить?

блин прикольно. даже не подумал бы, что такое без js можно сделать

+

Edited September 8, 2012 by amelice

[headstik]

amelice, по вашим шарикам если провести мышкой туда-сюда несколько раз они еще продолжают колебаться ))

А вообще, прикольно - раздел "Для начинающих" )

[amelice]

amelice, по вашим шарикам если провести мышкой туда-сюда несколько раз они еще продолжают колебаться ))

А вообще, прикольно - раздел "Для начинающих" )

Так, я же поправила. А вы обновленный вариант смотрели?

Edited September 8, 2012 by amelice