jquery 图片移向购物车效果

css

body{margin: 0;}
  .btn{position: fixed; bottom: 5px; right: 10px;}
  .l{ width: 80%; float: left; background: #eee;height: 100%;;}  
  .r{width: 20%; right: 0; height: 100%; position: fixed; text-align: center;}
  .product{ width: 200px; overflow: hidden; background: #ddd; padding: 10px; margin: 10px;}
  .product ._img .productimg{ background-size: over; width:200px; height: 150px; }

html

<div class="l">
    <ul id="ulproduct">
        <li class="product">
           <div class="_img"> <img class="productimg" src="图片" alt=""> </div>
          <div>产品名字产品名字产品名字</div>
          <div>
            <span>价格：20</span><span>库存：10</span>
          </div>
          <div><button id="submit">加入购物车</button></div>
       </li>
    </ul>
  </div>
    
  <div class="r"> 
      <div>
        <div>购物车</div>
        <div>共<span class="count">0</span>件商品</div>
      </div>
  </div>

jquery

$(document).ready(function(){
  //购物车
  /**
   * 1.点击购物车右侧+1个商品
   * 2.点击的商品的图片飞翔到右侧商品数那里 (1.取到图片路径 2.图片显示到页面上 3.飞到右侧 4.飞入的过程，图片移动)
   * 3.飞入后商品增加图片删除
   * **/
  $('body').on('click','#submit',function(){
    var vm =$(this);
    var count = $('.count').text();
    //移动到的位置
    var x =$('.count').offset();
    
    var productImg =vm.parent().siblings('._img').find('img');
    var shoopingImg = productImg.clone();
    shoopingImg.css({
      //克隆样式            
      "width": "250px", "height": "250px", "position": "absolute",
      "top":productImg.offset().top,
      "left":productImg.offset().left
    });
    shoopingImg.appendTo($("body")).animate(
      {
        top:x.top,left:x.left,width:'50',height:'50px'
      },function(){
      var s = shoopingImg.offset();
        shoopingImg.remove();
        ++count;
        $('.count').text(count);
    })
    
  })


  });
  </script>