Jquery - эффект летящей картинки при добавлении в корзину товара

Для того, чтобы показать вашим покупателям где находится корзина можно сделать интересный эффект, при котором например кнопочка "добавить в корзину" улетает в корзину.

В данном случае эта кнопочка сделана в виде картинки

<input type="button" id="product64749" src="/images/cart.png" onclick="animate_cart_my(this);">

Для обработки нажатия на кнопку есть функция animate_cart_my

тут я не буду описывать аяксовые отправки форм, это у каждого по своему, но вы можете вызывать функцию либо из аяксовой анимацию либо из анимации аякс.

function animate_cart_my (obj)
{
src = obj.src;
    
$('<img src="'+src+'"
    id="temp_cart_animate"
    style="z-index: 2000;
    position: absolute;
    top:'+Math.ceil($(obj).offset().top)+'px;
    left:'+Math.ceil($(obj).offset().left)+'px;">
    ').prependTo('body');
   
    $('#temp_cart_animate').animate(
    {
        top: 150+$(window).scrollTop(),
        left: $('body').width()
    },
    700,
    function() {$('#temp_cart_animate').remove();});
}


А теперь распишу всё подробней
Math.ceil($(obj).offset().top)
и 
Math.ceil($(obj).offset().left)
тут мы получаем координаты нашей исходной картинки


$('вася').prependTo('body');
добавление слова вася после открытого тега body, в моей функции добавляется новая картинка и располагается поверх исходной


 $('#temp_cart_animate').animate(
    {
        top: 150+$(window).scrollTop(),
        left: $('body').width()
    },
    700,
    function() {$('#temp_cart_animate').remove();});



тут мы для вновь созданную картинку анимировано сдвигаем, сверху отступ будет 150 пикселей с учетом скрола страницы

слева отступ будет таким, чтобы картинка улетела за пределы страницы вправо, далее мы удаляем нашу картинку, чтобы не мешалась