jquery Imitation Sky Cat to achieve the stunning add shopping cart _jquery

Super Dazzle add to the shopping cart effect, and the day cat, Poly beautiful products to join the shopping cart effect comparable. This article describes a add to the shopping cart plug-in jquery.fly.min.js, click to add a shopping cart, items with a parabolic animation effect to reach the shopping cart.

Demo diagram:

Html

First load the jquery.js and Jquery.fly.min.js plug-ins.

<script src= "Jquery.js" ></script> 
<script src= "Jquery.fly.min.js" ></script>

Next, make a demo of 4 products, each product has pictures, price, name and add the cart button and other information.

<div class= "Demo Clearfix" > <div class= "per" >   

Jquery

The effect we want to achieve is: When you click on the "Add To Cart" button, the product image will become a reduced ball, with the button as the starting point, to the right side of the parabola to fly out to the right side of the shopping cart. Before we fly out, we want to get a picture of the current product, and then call the Fly plug-in, and then the parabola trajectory is done by the fly plug-in, we just need to define the start and end of the left and after the destruction of the animation.

$ (function () { 
  var offset = $ ("#icon-cart"). offset (); 
  $ (". Addcart"). Click (Function (event) { 
    var img = $ (this). Parent (). Children (' img '). attr (' src ');//Get current click picture link 
    var flyer = $ ('  '); Parabolic Object 
    flyer.fly ({ 
      start: { 
        left:event.pagex,//) the start of the horizontal axis 
        Top:event.pageY//Parabolic object ordinate 
      }, End 
      : { 
        Left:offset.left + 10,//Parabolic object 
        Top:offset.top + 10,//Parabolic end ordinate 
      }, 
      onend:function ( { 
        $ ("#tip"). Show (). Animate ({width: ' 200px '},300). fadeout (500);////successfully joined the shopping cart animation effect 
        this.destory ();//Destroy Parabolic objects 
      } 
    }); 
  }); 
});

The above code can be completed into the shopping cart effect, is not very good ah! Fly Plugin official website: https://github.com/amibug/fly, other compatible IE10 the following need to add the following JS file:

<script src= "Requestanimationframe.js" ></script>

The above mentioned is the entire content of this article, I hope you can enjoy