jQuery realizes pop-up animation (from bottom to top, from top to bottom, gradually fade out)

Catalog

The pop-up window is from bottom to top (slideDown(),slideUp()), and the callback function can be set. slideToggle() can realize two functions: slideDown(),slideUp()

Pop ups fade in (), fadeout (), and callbacks can be set. fadeToggle() can realize fadeIn(),fadeOut()

Fadeto (time, transparency): transparency can be specified

The pop-up window is from bottom to top (slideDown(),slideUp()), and the callback function can be set. slideToggle() can realize two functions: slideDown(),slideUp()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jQuery Realize advertisement pop-up</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">Close</button>
		</div>
	</body>
</html>

Pop ups fade in (), fadeout (), and callbacks can be set. fadeToggle() can realize fadeIn(),fadeOut()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jQuery Realize advertisement pop-up</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">Close</button>
		</div>
	</body>
</html>

Fadeto (time, transparency): transparency can be specified

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jQuery Realize advertisement pop-up</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 completely transparent; 1 completely opaque
			},1000)
			
			$(function(){
				$("#closeBtn").click(function(){
					$("#ad").fadeToggle("slow");
				})
			})
		</script>
	</head>
	<body>
		<div id="ad">
			<button id="closeBtn">Close</button>
		</div>
	</body>
</html>

Tags: JQuery Javascript

Posted on Thu, 28 Nov 2019 13:23:23 -0800 by aleph_x