jQuery实现加入购物车飞入动画效果

当您在电商购物网站浏览中意的商品时，您可以点击页面中的“加入购物车”按钮即可将商品加入的购物车中。本文介绍借助一款基于


jQuery的动画插件，点击加入购物车按钮时，实现商品将飞入到右侧的购物车中的效果。


HTML
首先载入jQuery库文件和jquery.fly.min.js插件。


<script src="jquery.js"></script> 
<script src="jquery.fly.min.js"></script> 
接着，将商品信息html结构布置好，本例中，我们用四个商品并排布置，每个商品box中包括有商品图片、价格、名称以及加入购物车按钮


等信息。


<div class="box"> 
    <img src="images/lg.jpg" width="180" height="180"> 
    <h4>￥<span>3499.00</span></h4> 
    <p>LG 49LF5400-CA 49寸IPS硬屏富贵招财铜钱设计</p> 
    <a href="#" class="button orange addcar">加入购物车</a> 
</div> 
<div class="box"> 
    <img