想要做一个简单的购物车添加动画,但是又不想使用插件去完成,可以使用该段代码,每节代码都添加了比较详细的注释,应该通俗易懂!
大致思路:
1、给添加按钮绑定一个点击事件; $(selector).on('even',function(){});
2、克隆一个商品图片(不仅限于图片),使其位置与原来相同; $(selector).clone();
3、给克隆得到的图片一个新的样式;
4、将克隆元素添加到body中; $(selector1).appendTo(selector2);
5、移动克隆元素到购物车处 ; $(selector).animate();
6、移动完成后执行队列的下一个动画,将克隆元素隐藏; $(selector).detach();
7、隐藏执行完毕,销毁本身。
<script>
$('.add-to-cart').on('click', function () {//on绑定事件
var cart = $('.shopping-cart');//购物车
var imgtodrag = $(this).parent('.item').find("img").eq(0);//商品图片
if (imgtodrag) {//如果商品图片存在
var imgclone = imgtodrag.clone()//克隆商品图片,设置位置与原位置相同
.offset({
top: imgtodrag.offset().top,
left: imgtodrag.offset().left
})
.css({//设置新图片的样式
'opacity': '0.5',
'position': 'absolute',
'height': '150px',
'width': '150px',
'z-index': '100'
})
.appendTo($('body'))//将其加入body中
.animate({//设置动画
'top': cart.offset().top + 10,//比购物车偏低10px
'left': cart.offset().left + 10,//比购物车偏右10px
'width': 75,
'height': 75
}, 1000, 'easeInOutExpo');//easeInOutExpo是一个回调函数
imgclone.animate({//使图片隐藏
'width': 0,
'height': 0
}, function () {//图片隐藏后执行回调函数,移除自己
$(this).detach()
});
}
});
</script>