jQuery animate（）写弹层

最新推荐文章于 2020-08-02 13:13:07 发布

原创最新推荐文章于 2020-08-02 13:13:07 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #animate

本文介绍了一种利用jQuery的animate方法实现网页弹窗动画效果的方法。通过将弹窗定位在不可见位置，并通过底部坐标的变化来实现弹窗的滑动动画效果。此外，还使用了fadeIn和fadeOut方法为背景提供了淡入淡出的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面里面的弹层我们一般比较容易想到先设置弹层的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()实现其他更好看的一些动画的，就不一一举例了。