31 jQuery——元素进出场动画效果

效果先看

主要函数

show(fast,slow,normal,毫秒数):将元素切换为可见的
hide(fast,slow,normal,毫秒数)：将元素切换为不可见的
toggle(fast,slow,normal,毫秒数):如果元素是隐藏的，切换为可见的，反之，如果元素是可见的。。。
slideDown(fast,slow,normal,毫秒数)：元素下滑显示
fadeIn(fast,slow,normal,毫秒数) :淡入
fadeOut(fast,slow,normal,毫秒数) :淡出

测试代码

<!DOCTYPE html>
<html>
	<head>
		<!-- 
			show(fast,slow,normal,毫秒数):将元素切换为可见的
			hide(fast,slow,normal,毫秒数)：将元素切换为不可见的
			toggle(fast,slow,normal,毫秒数):如果元素是隐藏的，切换为可见的，反之，如果元素是可见的。。。
			slideDown(fast,slow,normal,毫秒数)：元素下滑显示
			fadeIn(fast,slow,normal,毫秒数) :淡入
			fadeOut(fast,slow,normal,毫秒数) :淡出
		 -->
		<meta charset="utf-8">
		<title>jQuery动画效果</title>
		<script src="js/jQuery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function test(){
				$("#showdiv").show(2000)
				$("#showdiv").hide(1000)
				$("#div1").show(1100)
				$("#div1").hide(1000)
			}
			function slideDownTest(){
				$("#div1").hide()
				$("#div1").slideDown();
			}
			function fadeInTest(){
				$("#div1").hide()
				$("#div1").fadeIn(4000);
			}
		</script>
		<style type="text/css">
			#showdiv{
				height: 18.75rem;
				background-color: orange;
				display: none;
			}
			#div1{
				height: 18.75rem;
				background-color: purple;
				display: none;
			}
		</style>
	</head>
	<body>
		<input type="button" name="" id="" value="show与hide" onclick="test()"/>
		<input type="button" name="" id="" value="slideDown()下滑" onclick="slideDownTest()"/>
		<input type="button" name="" id="" value="fadeIn()淡入" onclick="fadeInTest()"/>
		<hr>
		<div id="showdiv" ></div>
		<div id="div1" ></div>
	</body>
</html>

来源：https://www.cnblogs.com/Scorpicat/p/12259617.html

标签

动画

动漫