购物车飞入特效

由于公司要求，我开始着手购物车飞入特效，在爱心人士的帮助下，我终于弄出来了
网上的demo

{{item.title}}

￥{{item.price}}

￥{{item.delprice}}

我是购物车

而我自己用的时候出现了好多bug
1.我想着，我的按钮有了click点击事件，就不用写 $(".bottomImg").on("click",function()\ast 酱样的了，但是我发现，当我不使用\ast$(".bottomImg").on(“click”, function(){}的时候，我的$(this).parent().parent().find(".Img");\ast \ast 是找不到元素的，但是当我使用js获取父元素下的img时，他只是固定了一个图片，所以我还是在mouted里写了$(".bottomImg").on(“click”, function(){}

2.当我在点击事件嵌套鼠标点击事件时，出现了，点击第一下动效不出现，第二下则出现动效。
原因是：

三个事件的触发时机

mousedown
当鼠标指针移动到元素上方，并按下鼠标按键（左、右键均可）时，会发生 mousedown 事件。
与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生。

mouseup
当在元素上松开鼠标按键（左、右键均可）时，会发生 mouseup 事件。 与 click 事件不同，mouseup 事件仅需要松开按钮。当鼠标指针位于元素上方时，放松鼠标按钮就会触发该事件

click
当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click 事件。
注意：触发click事件的条件是按下并松开鼠标左键！，按下并松开鼠标右键并不会触发click事件。

三个事件的触发顺序

若在同一个元素上按下并松开鼠标左键，会依次触发mousedown、mouseup、click，前一个事件执行完毕
才会执行下一个事件
若在同一个元素上按下并松开鼠标右键，会依次触发mousedown、mouseup，前一个事件执行完毕才会执行下一个事件，不会触发click事件

所以，当我在duoxuan函数中嵌套document.onmousedown函数，第一次点击是click事件，图片不会进行
飞入特效，当第二次鼠标按下，才会执行特效。而且document.onmousedown是全局，无论点击哪里，只
要鼠标按下就会执行该函数

3.我缩小之后的图片出现在图片下方，原因是我用了offset（）.top,offset是相对于父级的偏移量，所以，当页面滚动时top会发生改变。
而$(".shop-car")[0].getBoundingClientRect().top是相对于浏览窗口的高度
很明了了吧。
但是后来我就遇见了一个bug，就是我点击第一个图片时，第一个图片的动画是正确的，但是第二个图片会在我想要的目标位置下面，正好多出来我一个列表的高度后来我研究好几天，把dom.offset().top换成了dom.getBoundingClientRect().top之后依旧是这个问题，我在想
1.是不是样式叠加了，但是发现并没有
2.我同时输出img…getBoundingClientRect()和flyImg…getBoundingClientRect()第一个一样，但是当第二个的时候又差了80px，但是把第一个列表滚上去之后就不会在原图片下边。一直找不到原因，后来我发现，是我在插入元素的地方出现了误差
3是因为我将新图片插在了列表元素里了，插入#map里面就好了