sarhov
6/3/2017 - 2:30 PM

Fly to Cart Jquery

Fly to Cart Jquery

		  // ADD TO CART IMAGE ANIMATION (FLY TO CART) -- COOL -- //
		  $cart = $('span.glyphicon-shopping-cart');
			/* get details about the cart div */
			var t = $cart.offset().top;
			var l = $cart.offset().left;
			var w = parseInt($cart.css('width').replace('px',''));
			var h = parseInt($cart.css('height').replace('px',''));
			var vCenter = (t+h)/2; // vertical center of cart div
			var hCenter = (l+w)/2; // horizontal center of cart div
			$('.add-to-cart-button').on('click',function(e){
				e.preventDefault();
				//$orig = $(this).parentsUntil('.product-block').children('div.product-block-img:has(img)');
				$orig = $(this).parent('.product-block').find('img').addClass('test-animate');
				$clone = $orig.clone('img');
				//console.log($orig);
				//console.log($clone);
				//console.log(l);
				//console.log(t);
				//console.log($(this).parent('.product-block').find('img'));
				//console.log(vCenter);
				//console.log(hCenter);
				//make our duplicate for animation
				/* put our clone in the same position */
				$clone.css('position','absolute');
				$clone.css('top',$orig.offset().top);
				$clone.css('left',$orig.offset().left);
			  
			  $('body').append($clone);
			  //console.log($('body').append($clone));
			  // add to the dom so we can see it.
			  // then animate
			  $.when($clone.animate({
			    top: t,
			    left: l,
			    width: '25px',
			    opacity: 0.2
			  })).done(function(){
			    // when the animation is done,
			    // we remove it from the DOM
			    $(this).remove();
			  });
			  console.log($orig);
			});