Реализация эффекта смены изображений?

Question

[Денис]

Приветствую!



Посоветуйте, каким способом можно реализовать вот такой эффект смены изображений: www.jamiemclellan.com/, только средствами JQuery?

Comments

[Денис]

Реализация варианта — пример

Answer 1

[Виталий Перетятько]

$('.slide').css('width', 0).animate({'css': '100%'}, 1000, 'easeInOutQuad');
как то так, только 'easeInOutQuad' — это из jQueryUI если его не подключать — надо перетянуть в свой код или написать самому easign который замедляет анимацию в начале и в конце.

Comments

[Денис]

Спасибо!
Вот можно посмотреть пример
На скорую руку.
Планирую реализовать в качестве плагина, оформить получше и дописать необходимые проверки.

[Денис]

Единственное, что глаз колит — это то что скорость стремится к нулю и к концу получается так (абстрактное выражение скорости): 3 — 2 — 1 — 0.5 — 0.25 — 0.125 — или вроде того. И получается последние пиксели еще относительно долго видны, чего нету в флешовом варианте. Может от параметров анимации зависит!?

[Виталий Перетятько]

зависит от типа easing. какие виды есть в jQueryUI можно посмотреть тут jqueryui.com/demos/effect/#easing
Если вы использовали тот easing что я вам писал так быть не должно, там скорость плавно увеличивается в начале, в середине анимация с постоянной скоростью и плавно уменьшается в конце (те тот эффект что в флеше).
Что то типа 1-2-3-4-4-4-3-2-1 (грубо)

[Денис]

А там разве не 4-4-4-3-2-1 на флеше?

[Денис]

Оставляю easeOutQuart, хотя easeOutCubic по-моему такой же… Спасибо.

Answer 2

[alternativshik]

сделать див по размеру картинки, overflow:hidden; в нем размещаем картинки с абсолютным позиционированием. Потом меняем координаты верхней картинки через jquery — просто «уезжаем» эту картинку вправо-лево, как нравится.
Примерно так вот это можно сделать.

Answer 3

[Softlink]

Не поверите, но это можно сделать и на CSS3.

Comments

[Softlink]

Ссылка на похожую реализацию