购物车动画实现原理

        想要做一个简单的购物车添加动画,但是又不想使用插件去完成,可以使用该段代码,每节代码都添加了比较详细的注释,应该通俗易懂!

大致思路:

1、给添加按钮绑定一个点击事件;                                                        $(selector).on('even',function(){});

2、克隆一个商品图片(不仅限于图片),使其位置与原来相同;          $(selector).clone();

3、给克隆得到的图片一个新的样式;

4、将克隆元素添加到body中;                                                                $(selector1).appendTo(selector2);

5、移动克隆元素到购物车处 ;                                                                $(selector).animate();

6、移动完成后执行队列的下一个动画,将克隆元素隐藏;                      $(selector).detach();

7、隐藏执行完毕,销毁本身。

 

你可能感兴趣的:(前端)