
Одна из хотелок заказчиков интернет магазинов — анимированная отправка товара в корзину при клике на кнопку «купить» или «в корзину». Сделать данный эффект не сложно, использую библиотеку jquery. Сразу приводим решение:
$('.product-order').on('click', function(){
var that = $(this).closest('.product-item').find('img');
var bascket = $(".bascket");
var w = that.width();
that.clone()
.css({'width' : w,
'position' : 'absolute',
'z-index' : '9999',
top: that.offset().top,
left:that.offset().left})
.appendTo("body")
.animate({opacity: 0.05,
left: bascket.offset()['left'],
top: bascket.offset()['top'],
width: 20}, 1000, function() {
$(this).remove();
});
});
Принцип работы следующий: класс .product-order - это класс кнопки купить, на которую будут нажимать пользователи. Класс .product-item - это обертка нашей карточки товара, внутри которой есть и сама кнопка купить и картинка, которая полетит в корзину. Класс .bascket - это класс вашей корзины, туда и полетит изображение. Итак, при клике
Находим изображение товара, замеряем его позицию от левого верхнего угла страницы.
Клонируем картинку, помещаем ее над исходной картинкой. И анимируем полет до блока с корзиной со скоростью 1000ms.
Руслан
7 лет назадyanka
7 лет назадВася
6 лет назадДмитрий
6 лет назадМихаил
5 лет назадпишет
Uncaught TypeError: Cannot read property 'left' of undefined
Рома
4 года назадРоман
4 года назад