Question

Currently I’m developing a web shop, and I want to make an animation. When a user hits the button “Add to cart” I want to add the product to the cart (image goes directly to the cart animation). I tried with a jquery function, but it’s too slow.

<script>
var cCount = 0;
var cId = -1;

function add_to_cart(){
   cId = setInterval(function(){ animateCart(); }, 1);


}

function animateCart(){
   $("#cart-image").animate({
   "left" : "+=1px",
   "top" : "-=1px"
   }, 1);

if(cCount >= 400)
   clearInterval(cId);

   cCount++;
}
</script>

the $(“#cart-image”) is a 120×120 image, position absolute and opacity 0.5.

The script is working, it’s going directly to the cart, but it’s too slow. It takes too long, 4 or 5 seconds. I want something like a jump effect. Is this possible?

Answer 1

You’re doing it wrong. The animate method itself is used for animation, you don’t need additional intervals. Just move the #cart-image item to the desired position, in this case top 100px, left 100px

$("#cart-image").animate({
  "left" : "100px",
  "top" : "100px"
}, 500);