Jquery: анимированный полет товара в корзину

21141
2521
27 Октября 2017, 12:38

bascket

Одна из хотелок заказчиков интернет магазинов — анимированная отправка товара в корзину при клике на кнопку «купить» или «в корзину». Сделать данный эффект не сложно, использую библиотеку 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. 

Теги:
  • jquery
  • анимация
  • js
  • полет в корзину
ДРУГИЕ СТАТЬИ
Шпаргалка: вывод элементов инфоблока через GetList
Выводим элементы инфоблока посредством CIBlockElement::GetList
6415
769
04.10.2022
Битрикс: ошибка type => unknown у метода CFile::MakeFileArray
Решение ошибки с неизвестным типом файла при использовании метода CFile::MakeFileArray
4973
596
03.12.2021
Интересные книги по математике
Подборка действительно интересных книг по математике для тех, кто хочет углубиться в программировании и математике
6001
720
22.10.2019
301 редиректы, которые пригодятся для SEO
Подборка 301 редиректов, которые пригождается на большинстве проектов и которые просят сделать для СЕО оптимизации
5095
611
16.04.2019
Комментарии
5 лет назад

Руслан

5 лет назад
Дружище - огромное спасибище.... Дай бог тебе здоровья и денег...
дуже дякую!!!))
спасибо, помогло

Дмитрий

5 лет назад
Спасибо! :-) Всё работает
3 года назад

Михаил

3 года назад
у меня у одного что ли не работает?
пишет
Uncaught TypeError: Cannot read property 'left' of undefined
Огромное сам спасибо) Вы очень крутой)
а кто подскажет куда это вставлять?
Комментировать