jQuery animate（）写弹层

页面里面的弹层我们一般比较容易想到先设置弹层的display:none;然后用点击事件触发show(),使其显现，这样做最简单也最好理解。不过这样就没有其他的一些好看点的效果了，就是简单的显示隐藏，这里可以用到jQuery的animate()方法完成简单的动画效果。

弹层的css代码:

.popBox{position:fixed;width:100%;z-index:15;bottom:-50rem;left:0;background-color: #fff;}

这里没有把弹层隐藏，而是定位在页面下面-50rem的地方，所以进页面也是看不到的。	

    JS代码:

	//点击选择配送商品弹出弹层
	$("body").on("click",".chooseAddress",function(){
   		$(".popbg").fadeIn(); 
   		$(".popBox").animate({bottom:"0rem"});
	});
        //关闭弹层
	$("body").on("click",".confirm,.closePopBox",function(){
   		$(".popbg").fadeOut();
   		$(".popBox").animate({bottom:"-50rem"});
	});
这里用animate()实现了简单的滑动动画，fadeIn()和fadeOut()实现了淡入淡出的效果，比起只是简单的显示隐藏效果是要好看那么一点点。当然还可以用animate()实现其他更好看的一些动画的，就不一一举例了。