カートに商品を追加

ショッピングカートのアニメーションに商品を追加して、ネット上の多くは放物線の思想でして、これは1種のとても良い思想で、ネット上にも多くのdemoと紹介があって、ここで私は別の方法を紹介して、1種の直線運動、実現するのがとても便利な方法です.
主な考え方
1,‘カートに加入する’をクリックすると,クリックされたボタンの‘座標1’を取得する.2現在の座標位置にアニメーションノードを作成します.3、目標ノード(カート位置)「座標2」を取得する.4,jQueryのanimate関数を使って、アニメーションのポイントを“座標1”から“座標2”に移動したい
このようにするのは直線の運動で、so easyかどうか、話は多くなくて、コードをつけます

  
   
  

    

      
     
      
     
      
     
      
     
      
     
      
     
  





//        
function createplane(orL,orT) {
    var createele = document.createElement('div');
    createele.setAttribute("class","goodsone");
    createele.style.position = 'absolute';
    createele.style.width = '50px';
    createele.style.height = '50px';
    createele.style.backgroundColor = 'red';
    createele.style.left = orL+'px';
    createele.style.top = orT+'px';
    createele.style.borderRadius = '25px';
    document.body.appendChild(createele);
}

//        
$(".goodson").click(function () {
//             （       ）  
    var orL = $(this).offset().left;
    var orT = $(this).offset().top;
    //      （   ）  
    var obL = $(".shopcar").offset().left;
    var obT = $('.shopcar').offset().top;
    createplane(orL,orT);
    $(".goodsone").animate({"left":obL+10+"px","top":obT+10+"px"},1000,function () {
        $(this).remove();
    });
})