Полет товара в корзину. Метод .animate(); на jQuery

Сегодня потребовалось создать анимацию добавления товара в корзину. После нажатия на «Добавить в корзину» картинка товара должна была пролететь по странице и попасть в блок со списком добавленных товаров. Решение оказалось совсем несложным, достаточно было использовать метод .animate(); на jQuery. Если совсем коротко, то данный метод постепенно изменяет любые CSS-свойства указанного объекта (узла в контексте DOM или просто HTML-блока, выражаясь понятным языком), которые можно задать числом.

$("#target").animate( CSS-свойства, [Продолжительность,] [Облегчающая функция,] [Колбек] );

CSS-свойства — список CSS-свойств и их конечных значений, которые плавно получит объект. Можно задать так {‘свойство_1′ : ‘значение’, ‘свойство_2′ : ‘значение’} Это единственный обязательный параметр.
Продолжительность — время в миллисекундах за которое произойдут все изменения.
Облегчающая функция — строчный необязательный параметр. Определяет способ вычисления скорости изменения свойств объекта. Сам не погружался в дебри, лишь понял, что по-умолчанию доступно значение ‘swing’. Для того чтобы появилась возможность использовать другие значения, нужно использовать jQuery-плагины, в первую очередь из набора jQuery UI.
Колбек — Сallback он и в Африке Сallback.

Логично, что заставить объект лететь по странице может плавное изменение координат его размещения или отступов.


Код примера:



<code>...</code>

Комментарии(19)

  1. Кирилл

    Спасибо! пригодилось!

  2. Станислав

    Ясно, спасибо. Но как сделать чтобы товар летел именно к блоку с корзиной? У которой ID Например IdCart

  3. Kela

    Во-первых-Большое спасибо за предоставленное решение!!!…

    Но есть вопросик! Очень нужный!…
    …Как сделать,чтобы картинка отрывалась от картинки,а не от кнопки???

    Автор,очень большая просба ответить!!!

  4. Степасюк Андрей

    Вместо .appendTo(«#fly») написать селектор нужной картинки. Допустим картинка будет

    <_img src="..." id="image">

    Тогда код будет выглядеть .appendTo(«#image»)

  5. Игорь

    Спасибо я тоже присоединяюся к вопросу — Но как сделать чтобы товар летел именно к блоку с корзиной?

  6. Игорь

    понял направление картинки меняются css параметроами а как привязать чтоб картинка летела к определеномму ID?

  7. Степасюк Андрей

    Игорь, нужно с помощью JavaScript-кода определить координаты блока с нужным ID и указать соответствующий отступ, или относительное положение CSS-свойствами top, left в качестве конечных параметров перемещаемого элемента.

    Определить координаты можно по-разному, например с помощью свойств метода $(«#целевой_ID»).offset().left; и $(«#целевой_ID»).offset().top;

  8. Максим

    У меня чего-то не работает. Засада млин.

  9. Максим

    А не все нормуль, работает. Спасибо.

  10. Максим

    А как реализовать чтобы улетало от каждой картинка. То есть например у меня 5 картинок с товарами (выводятся в цикле), но если использовать приведенный пример на этой странице, то улетает только от самого первого товара, от последующих ничего не происходит.

  11. Степасюк Андрей

    В цыкле присваивать картинкам id. Например id-1, id-2 … id-n И переписать функцию выше так, что id улетаемого товара передавался ей по параметру, а не был жестко задан.

  12. Максим

    Разобрался спасибо. В принципе я так и сделал. Но чутка не так.

  13. Игорь

    Чето летит сейчас вообше слевого угла никак нельзя чтоб от картинки?

    • s544836

      У меня летит от картинки.

  14. Hostrm

    спасибо!! отлично! в закладки

  15. Юра

    Кстати, если картинка летит снизу вверх к корзине, то в google периодически остается полоса по пути следования.

  16. Юра

    Это если использовать позиционирование fixed

  17. Юра

    Я этот вопрос решил выставив картинке padding: 1px; полоса остается но она не видна и это главное. Может кому пригодится. Лично меня эта полоса достала.

  18. Гость

    5+

Оставить комментарий