jQuery新增到購物車動畫特效外掛

線上預覽 下載

這是一款jQuery新增到購物車動畫特效外掛。該外掛可以非常方便的製作出點選商品購買按鈕，商品飛入購物車的動畫特效。

使用方法

在頁面中引入jquery和jquery.animate_from_to-1.0.js檔案。

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.animate_from_to-1.0.js"></script>                  
                

HTML結構

使用下面的HTML結果來建立購物車和購買按鈕。

<span id="cart">
    購物車
</span>
<div id="prod_123" style="height: 100px; width:300px; margin-top: 300px; background: pink">
    <form onsubmit="return false;">
        <button type="submit" id="button1">新增到購物車 (預設)</button>
    </form>
</div>
                

初始化外掛

在頁面DOM元素載入完畢之後，透過下面的方法來初始化該jQuery新增到購物車動畫特效外掛。

$("#button1").click(function(){
  $("#prod_123").animate_from_to("#cart");
})