jQuery animate（）写弹层

本文主要是介绍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()实现其他更好看的一些动画的，就不一一举例了。

这篇关于jQuery animate（）写弹层的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---