Полет товара в корзину. Метод .animate(); на jQuery
Сегодня потребовалось создать анимацию добавления товара в корзину. После нажатия на «Добавить в корзину» картинка товара должна была пролететь по странице и попасть в блок со списком добавленных товаров. Решение оказалось совсем несложным, достаточно было использовать метод .animate(); на jQuery. Если совсем коротко, то данный метод постепенно изменяет любые CSS-свойства указанного объекта (узла в контексте DOM или просто HTML-блока, выражаясь понятным языком), которые можно задать числом.
$("#target").animate( CSS-свойства, [Продолжительность,] [Облегчающая функция,] [Колбек] );
CSS-свойства — список CSS-свойств и их конечных значений, которые плавно получит объект. Можно задать так {‘свойство_1’ : ‘значение’, ‘свойство_2’ : ‘значение’} Это единственный обязательный параметр.
Продолжительность — время в миллисекундах за которое произойдут все изменения.
Облегчающая функция — строчный необязательный параметр. Определяет способ вычисления скорости изменения свойств объекта. Сам не погружался в дебри, лишь понял, что по-умолчанию доступно значение ‘swing’. Для того чтобы появилась возможность использовать другие значения, нужно использовать jQuery-плагины, в первую очередь из набора jQuery UI.
Колбек — Сallback он и в Африке Сallback.
Логично, что заставить объект лететь по странице может плавное изменение координат его размещения или отступов.
Код примера:
Кирилл
Спасибо! пригодилось!
Станислав
Ясно, спасибо. Но как сделать чтобы товар летел именно к блоку с корзиной? У которой ID Например IdCart
Kela
Во-первых-Большое спасибо за предоставленное решение!!!…
Но есть вопросик! Очень нужный!…
…Как сделать,чтобы картинка отрывалась от картинки,а не от кнопки???
Автор,очень большая просба ответить!!!
Степасюк Андрей
Вместо .appendTo(«#fly») написать селектор нужной картинки. Допустим картинка будет
Тогда код будет выглядеть .appendTo(«#image»)
Игорь
Спасибо я тоже присоединяюся к вопросу — Но как сделать чтобы товар летел именно к блоку с корзиной?
Игорь
понял направление картинки меняются css параметроами а как привязать чтоб картинка летела к определеномму ID?
Степасюк Андрей
Игорь, нужно с помощью JavaScript-кода определить координаты блока с нужным ID и указать соответствующий отступ, или относительное положение CSS-свойствами top, left в качестве конечных параметров перемещаемого элемента.
Определить координаты можно по-разному, например с помощью свойств метода $(«#целевой_ID»).offset().left; и $(«#целевой_ID»).offset().top;
Максим
У меня чего-то не работает. Засада млин.
Максим
А не все нормуль, работает. Спасибо.
Максим
А как реализовать чтобы улетало от каждой картинка. То есть например у меня 5 картинок с товарами (выводятся в цикле), но если использовать приведенный пример на этой странице, то улетает только от самого первого товара, от последующих ничего не происходит.
Степасюк Андрей
В цыкле присваивать картинкам id. Например id-1, id-2 … id-n И переписать функцию выше так, что id улетаемого товара передавался ей по параметру, а не был жестко задан.
Максим
Разобрался спасибо. В принципе я так и сделал. Но чутка не так.
Игорь
Чето летит сейчас вообше слевого угла никак нельзя чтоб от картинки?
s544836
У меня летит от картинки.
Hostrm
спасибо!! отлично! в закладки
Юра
Кстати, если картинка летит снизу вверх к корзине, то в google периодически остается полоса по пути следования.
Юра
Это если использовать позиционирование fixed
Юра
Я этот вопрос решил выставив картинке padding: 1px; полоса остается но она не видна и это главное. Может кому пригодится. Лично меня эта полоса достала.
Гость
5+