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

购物车按钮：

<a href="javascript:;" class="add" id="addcar"><span>加入购物车</span></a>

实现代码：

$(function() {
  var offset = $(".shop-cart").offset();
  $("#addcar").click(function(event){
  var  pid=$("#productId").val();
    $.get('${base}/cart/add.jhtml',{'id':pid,'quantity':1},function(message){
    if(message.type=='success'){
      var addcar = $(this);
    var img = $("#pikame li").find('img').attr('src');
    var flyer = $('<img class="u-flyer" src="'+img+'">');
    flyer.fly({
      start: {
      left: event.pageX,
      top: event.pageY
    },
    end: {
      left: offset.left+10,
      top: offset.top+10,
      width: 0,
      height: 0
    },
    onEnd: function(){
      $("#msg").show().animate({width: '200px',height:'50'}, 200).fadeOut(1000);
      $("#addcar").unbind('click');
      this.destory();
      } 
    });
      
    }else{
      $("#error").show().animate({width: '200px',height:'50'}, 200).fadeOut(1000);
      }
    });
    
    
  });
  
});

offset() 方法设置或返回被选元素相对于文档的偏移坐标。

当用于返回偏移时： 

该方法返回第一个匹配元素的偏移坐标。它返回一个带有两个属性（以像素为单位的 top 和 left 位置）的对象。

当用于设置偏移时： 

该方法设置所有匹配元素的偏移坐标。

插件下载：