购物车增加、减少商品时动画效果：jQuery.Fly.js插件使用方法

<script type="text/javascript">
$(function(){
$("#divSource input[value='add']").bind("click",function(){
var _sourceImg=$(this).prev();
var _back=function(){};
var _target=$("#divTarget");
objectFlyIn(_sourceImg,_target,_back);
});
$("#divSource input[value='remove']").bind("click",function(){
var _sourceImg=$(this).prev().prev();
var _back=function(){};
var _target=$("#divTarget");
objectFlyOut(_sourceImg,_target,_back);
});
/**
* 对象飞入
*
*/
function objectFlyIn(_sourceImg,_target, _back) {
var addOffset =_target.offset();

var img = _sourceImg;
var flyer = $('<img style="display: block;width: 50px;height: 50px;border-radius: 50px;position: fixed;z-index: 100000;" src="' + img.attr('src') + '">');
var X,Y;

if(img.offset()){
X = img.offset().left - $(window).scrollLeft();
Y = img.offset().top - $(window).scrollTop();
}
flyer.fly({
start: {
left: X + img.width() / 2 - 25, //开始位置（必填）
top: Y + img.height() / 2 - 25 //开始位置（必填）
},
end: {
left: addOffset.left + 10, //结束位置（必填）
top: addOffset.top + 10, //结束位置（必填）
width: 10, //结束时宽度
height: 10 //结束时高度
},
onEnd: function () { //结束回调
this.destroy(); //移除dom
_back();
}
});

}

/**
* 对象飞出
*
*/
function objectFlyOut(_sourceImg,_target, _back) {
var addOffset = _target.offset();

var img = _sourceImg;
var flyer = $('<img style="display: block;width: 50px;height: 50px;border-radius: 50px;position: fixed;z-index: 100000;" src="' + img.attr('src') + '">');

flyer.fly({
start: {
left: addOffset.left, //开始位置（必填）
top: addOffset.top //开始位置（必填）
},
end: {
left: addOffset.left-20, //结束位置（必填）
top: addOffset.top-20, //结束位置（必填）
width: 5, //结束时宽度
height: 5 //结束时高度
},
onEnd: function () { //结束回调
this.destroy(); //移除dom
_back();
}
});
}

})
</script>