jq カートに追加放物線アニメーション jquery.fly

まず、jq プラグイン jquery.fly.min.js を導入します。

ダウンロードアドレス https://github.com/amibug/fly

<script lang="javascript" type="text/javascript" src="/static/wap2/js/jquery.fly.min.js"></script>

#add_beixuan はクリックされた要素とここからスライドする要素です

#icon-cart がスライドの終点です。この要素までスライドします

$("#add_beixuan").click(function (event){
    var offset = $("#icon-cart").offset();
    var flyer = $('<div id="hhh" style="background:#ff8000;width:45px;height:45px;border-    radius:45px;z-index:9999;"></div>'); //抛物体对象,也可以用图片  
	    flyer.fly({   
		    start: {
			    left: event.pageX,//抛物体起点横坐标   
			    top: event.pageY//抛物体起点纵坐标   
		    },   
		    end: {   
			    left: offset.left+10,//抛物体终点横坐标   
			    top: offset.top-30 , //抛物体终点纵坐标   
		    },   
		    speed: 0.3, //动画速度越小越慢
		    onEnd: function() {
			    $('#hhh').remove()
			    $('.jiaru').show()
			    $("#tip").show().animate({width: '200px'},500).fadeOut(500);成功加入购物车动画效果   
			    // this.destory(); //销毁抛物体   
		    }   
	    });   
})