Skip to content

Instantly share code, notes, and snippets.

@malachi358
Created September 13, 2016 20:40
Show Gist options
  • Save malachi358/5c6c2fbd937d35107b362bec13bbfcf7 to your computer and use it in GitHub Desktop.
Save malachi358/5c6c2fbd937d35107b362bec13bbfcf7 to your computer and use it in GitHub Desktop.
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);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment