jQuery实现弹窗动画（自下而上，自上而下，渐隐渐现）

野性酷女 2021-09-18 22:42 442阅读 0赞

**目录**

弹窗自下而上，自上而下（slideDown(),slideUp()）,可设置回调函数。slideToggle（）能实现slideDown(),slideUp()这两种功能

弹窗渐隐渐现（fadeIn(),fadeOut()），可设置回调。fadeToggle（）能实现fadeIn(),fadeOut()这两种功能

fadeTo(时间，透明度)：可指定透明度

--------------------

# 弹窗自下而上，自上而下（slideDown(),slideUp()）,可设置回调函数。slideToggle（）能实现slideDown(),slideUp()这两种功能 #

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>jQuery实现广告弹窗</title>
    		<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
    		<style type="text/css">
    			#ad{
    				width: 300px;
    				height: 300px;
    				background-color: yellowgreen;
    				bottom: 0;
    				right: 0;
    				position: fixed;
    				display: none;
    			}
    		</style>
    		<script type="text/javascript">
    			setTimeout(function(){
    			   $("#ad").slideDown(2000);
    			},1000)
    			
    			$(function(){
    				$("#closeBtn").click(function(){
    					$("#ad").slideUp("fast");
    				})
    			})
    		</script>
    	</head>
    	<body>
    		<div id="ad">
    			<button id="closeBtn">关闭</button>
    		</div>
    	</body>
    </html>

![2019041315004051.gif][]

# 弹窗渐隐渐现（fadeIn(),fadeOut()），可设置回调。fadeToggle（）能实现fadeIn(),fadeOut()这两种功能 #

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>jQuery实现广告弹窗</title>
    		<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
    		<style type="text/css">
    			#ad{
    				width: 300px;
    				height: 300px;
    				background-color: yellowgreen;
    				bottom: 0;
    				right: 0;
    				position: fixed;
    				display: none;
    			}
    		</style>
    		<script type="text/javascript">
    			setTimeout(function(){
    			   $("#ad").fadeIn(2000);
    			},1000)
    			
    			$(function(){
    				$("#closeBtn").click(function(){
    					$("#ad").fadeOut("slow");
    				})
    			})
    		</script>
    	</head>
    	<body>
    		<div id="ad">
    			<button id="closeBtn">关闭</button>
    		</div>
    	</body>
    </html>

![20190413150432293.gif][]

# fadeTo(时间，透明度)：可指定透明度 #

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>jQuery实现广告弹窗</title>
    		<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
    		<style type="text/css">
    			#ad{
    				width: 300px;
    				height: 300px;
    				background-color: yellowgreen;
    				bottom: 0;
    				right: 0;
    				position: fixed;
    				display: none;
    			}
    		</style>
    		<script type="text/javascript">
    			setTimeout(function(){
    			   $("#ad").fadeTo (1000,0.5);//0 完全透明；1 完全不透明
    			},1000)
    			
    			$(function(){
    				$("#closeBtn").click(function(){
    					$("#ad").fadeToggle("slow");
    				})
    			})
    		</script>
    	</head>
    	<body>
    		<div id="ad">
    			<button id="closeBtn">关闭</button>
    		</div>
    	</body>
    </html>

![20190413151125134.gif][]

[2019041315004051.gif]: /images/20210725/81ff6951349f470e87c3dd187cd8b8ba.png
[20190413150432293.gif]: /images/20210725/2a32f95c387943629734a80e0f9c51eb.png
[20190413151125134.gif]: /images/20210725/5b202112d2c6402ebaf8cc19226d1586.png