Полет товара в корзину на jQuery

Сегодня передо мной стояла задача сделать красивый полет товара на jQuery, но чтобы это был не просто полет, а именно в корзину. Полистав статьи, которые предлагают различные блоггеры, пользователи форума и применив их на практике я понял, что они не достаточно соответствуют моим требованиям. А именно, там почему-то товары летят куда-то в бок (правый). Видать кто-то так сделал и ему этого было достаточно. А переделать было лень.

Я переделал этот код, усовершенствовав его

$(".to-cart").on("click",function(){
        id = $(this).attr("for");

        $("#product"+id)
            .clone()
            .css({'position' : 'absolute', 'z-index' : '11100', top: $(this).offset().top-300, left:$(this).offset().left-100})
            .appendTo("body")
            .animate({opacity: 0.05,
                left: $(".cart-text").offset()['left'],
                top: $(".cart-text").offset()['top'],
                width: 20}, 1000, function() {
                $(this).remove();
            });

    });

Где

  • .to-cart - это кнопка "Купить", по которой нажимает пользователь
  •  $("#product"+id) - это ID объекта, который нужно клонировать. В моем случае это был DIV, но по факту должна быть картинка

Основная отличительная черта его в том, что appendTo() я делаю именно в body, указав при этом координаты смещения (с ними нужно немного поиграться, чтобы попасть в картинку)

top: $(this).offset().top-300, left:$(this).offset().left-100}

А затем просто перемещаю клонированную картинку в координаты, которые соответствуют моей корзине.

left: $(".cart-text").offset()['left'],
top: $(".cart-text").offset()['top'],

Смотреть демо. Вот вам реальный пример, который я использовал во время разработки одного из сайтов. Там, правда, много лишнего кода, файлов, стилей, зато все наглядно работает.

Скачать урок

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Scroll Up
Adblock detector