欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

HTML——jQuery—动画特效之隐藏和显示案例

程序员文章站 2022-07-13 21:48:12
...
  • 案例 
    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 300px;
				height: 300px;
				background-color: red;
			}
			
			button{
				width: 100px;
				height: 50px;
				margin: 10px;
			}
		</style>
        //下载js文件
		<script src="../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8">
</script>
	</head>
	<body>
		
		<div class="box"></div>
		
		<div>
			<button>隐藏</button>
			<button>显示</button>
			<button>隐藏与显示</button>
		</div>
		
		<script>
			/**
			 * 隐藏
			 * hide(动作完成需要的时间（毫秒）, 动作完成后执行的函数)
			 * 显示
			 * show(动作完成需要的时间（毫秒）, 动作完成后执行的函数)
			 */
			
			$("button").eq(0).click(function(){
				// 隐藏标签
				//$(".box").hide()
				//$(".box").hide(3000)
				$(".box").hide(3000, function(){
					console.log("隐藏完成")
				})
			})
			
			$("button").eq(1).click(function(){
				// 显示标签
				$(".box").show(3000)
			})
			
			
			$("button").eq(2).click(function(){
				// 
				$(".box").toggle(3000)
			})
		</script>
	</body>
</html>

     

相关标签： Web前端

上一篇： Linux设备驱动开发——字符设备驱动架构

下一篇： Linux 常用内核网络参数与相关问题处理

推荐阅读