6
В данном случае эта кнопочка сделана в виде картинки
<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 пикселей с учетом скрола страницы
слева отступ будет таким, чтобы картинка улетела за пределы страницы вправо, далее мы удаляем нашу картинку, чтобы не мешалась
