想要做一個簡單的購物車新增動畫，但是又不想使用外掛去完成，可以使用該段程式碼，每節程式碼都添加了比較詳細的註釋，應該通俗易懂！

大致思路：

1、給新增按鈕繫結一個點選事件；                                                        $(selector).on('even',function(){});

2、克隆一個商品圖片（不僅限於圖片），使其位置與原來相同；          $(selector).clone();

3、給克隆得到的圖片一個新的樣式；

4、將克隆元素新增到body中；                                                                $(selector1).appendTo(selector2);

5、移動克隆元素到購物車處 ；                                                                $(selector).animate();

6、移動完成後執行佇列的下一個動畫，將克隆元素隱藏；                      $(selector).detach();

7、隱藏執行完畢，銷燬本身。

<script>
    $('.add-to-cart').on('click', function () {//on繫結事件
        var cart = $('.shopping-cart');//購物車
        var imgtodrag = $(this).parent('.item').find("img").eq(0);//商品圖片
        if (imgtodrag) {//如果商品圖片存在
            var imgclone = imgtodrag.clone()//克隆商品圖片，設定位置與原位置相同
                .offset({
                top: imgtodrag.offset().top,
                left: imgtodrag.offset().left
            })
                .css({//設定新圖片的樣式
                'opacity': '0.5',
                    'position': 'absolute',
                    'height': '150px',
                    'width': '150px',
                    'z-index': '100'
            })
                .appendTo($('body'))//將其加入body中
                .animate({//設定動畫
                'top': cart.offset().top + 10,//比購物車偏低10px
                    'left': cart.offset().left + 10,//比購物車偏右10px
                    'width': 75,
                    'height': 75
            }, 1000, 'easeInOutExpo');//easeInOutExpo是一個回撥函式
            
            imgclone.animate({//使圖片隱藏
                'width': 0,
                    'height': 0
            }, function () {//圖片隱藏後執行回撥函式，移除自己
                $(this).detach()
            });
        }
    });
</script>