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