Сегодня передо мной стояла задача сделать красивый полет товара на 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'],
Смотреть демо. Вот вам реальный пример, который я использовал во время разработки одного из сайтов. Там, правда, много лишнего кода, файлов, стилей, зато все наглядно работает.