Animate adding product image to cart

Code: Select all

$('html, body').animate({ scrollTop: 0 }, 'slow'); 

Code: Select all

animateProduct( $("#image") , $("#module_cart") );  

Code: Select all

 /* AddToCart */
   $('.addToCart').click(function() {
	  var tis = $(this);
	  $.ajax({
		 url: 'index.php?route=checkout/cart/update',
		 type: 'post',
		 data: 'product_id=' + tis.attr("data-id"),
		 dataType: 'json',
		 content: this,
		 success: $.proxy(function(json) {
			$('.success, .warning, .attention, .information, .error').remove();
			
			if (json['redirect']) {
			   location = json['redirect'];
			}
			
			if (json['error']) {
			   if (json['error']['warning']) {
				  $('#notification').html('<div class="warning" style="display: none;">' + json['error']['warning'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');
			   }
			}   
					 
			if (json['success']) {
			   $('#notification').html('<div class="attention" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');
			   
			   $('.attention').fadeIn('slow');
			   
			   $('#cart_total').html(json['total']);
			   $('#module_cart .cart-module').html(json['output']);
			   
			   animateProduct(tis.parents().eq(2).find(".image img") , $("#module_cart"));
			   
			   $('html, body').animate({ scrollTop: 0 }, 'slow');
			}   
		 }, this)
	  });
	  
   });

Code: Select all

function animateProduct(image,cart){

   image.before('<img src="' + image.attr('src') + '" id="temp" style="position: absolute; top: ' + image.top + 'px; left: ' + image.left + 'px;" />');

   var cart_offset  = cart.offset();

   params = {
	  top : cart_offset.top + 'px',
	  left : cart_offset.left + 'px',
	  opacity : 0.0,
	  width : cart.width(), 
	  height : cart.height()
   };

   $('#temp').animate(params, 'slow', false, function () {
	  $('#temp').remove();
   });
}

Code: Select all

<div class="cart"><a onclick="addToCart('<?php echo $product['product_id']; ?>');" class="button"><span><?php echo $button_cart; ?></span></a></div>

Code: Select all

<div class="cart"><a data-id="<?php echo $product['product_id']; ?>" class="button addToCart"><span><?php echo $button_cart; ?></span></a></div>

Code: Select all

function animateProduct(image,cart){

   image.before('<img src="' + image.attr('src') + '" id="temp" style="position: absolute; top: ' + image.top + 'px; left: ' + image.left + 'px;" />');

   var cart_offset  = cart.offset();

   params = {
     top : cart_offset.top + 'px',
     left : cart_offset.left + 'px',
     opacity : 0.0,
     width : cart.width(), 
     height : cart.height()
   };

   $('#temp').animate(params, 'slow', false, function () {
     $('#temp').remove();
   });
}

Code: Select all

function animateProduct(image,cart){
	var image_offset  = image.offset();
   $("body").append('<img src="' + image.attr('src') + '" id="temp" style="position: absolute; top:'+image_offset.top+'px; left:'+image_offset.left+'px" />');

   var cart_offset  = cart.offset();
   params = {
	  top : cart_offset.top + 'px',
	  left : cart_offset.left + 'px',
	  opacity : 0.0,
	  width : cart.width(),
	  height : cart.height()
   };
	
  $('#temp').animate(params, 'slow', false, function () {
	  $('#temp').remove();
   });
}