jQuery动画详解

最新推荐文章于 2024-05-15 12:02:42 发布

喜欢的七月

最新推荐文章于 2024-05-15 12:02:42 发布

阅读量177

点赞数

文章标签： javascript jquery

本文链接：https://blog.csdn.net/weixin_45979181/article/details/104497029

版权

1.显示、隐藏、显示隐藏切换

show() 显示动画 — 让隐藏的标签显示
hide() 隐藏动画 — 让显示的标签隐藏
toggle() 显示隐藏动画 — 让隐藏的标签显示，显示的标签隐藏，来回切换

语法：标签对象.show(时间，运动的方式，回调函数)
语法：标签对象.hide(时间，运动的方式，回调函数)
语法：标签对象.toggle(时间，运动的方式，回调函数)
参数1 : 时间，也就是动画的执行时间，毫秒
参数2 : 运动的方式，如 linear
参数3 : 回调函数，当运动结束时,执行的函数程序

 注意 : 一开始让标签对象隐藏，其css样式只能使用 display: none; 而不能使用opacity: 0;

动画效果：
显示隐藏动画
代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		   .wrap{
   
			  width: 220px;
			  margin: auto;
			  margin-bottom: 20px;
		   }
		
		    .box{
   
		        width: 200px;
		        height: 200px;
		        background: red;
		        margin: 0 auto;
		        display: none;
		    }
		</style>
	</head>
	<body>
		<div class="wrap">
			<button name="block">点我显示</button>
			<button name="none">点我隐藏</button>
			<button name="toggle">点我切换</button>
		</div>
		<div class="box"></div>
	</body>
</html>
<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	// 显示 
	$('[name="block"]').click(function(){
   
		$('.box').show(1000,'linear',function(){
   
			console.log('标签显示了');
		})
	})
	
	// 隐藏 
	$('[name="none"]').click(function(){
   
		$('.box').hide(1000,'linear',function(){
   
			console.log('标签隐藏了');
		})
	})
	
	// 显示隐藏切换
	$('[name="toggle"]').click(function(){
   
		$('.box').toggle(1000,'linear',function(){
   
			console.log('标签切换了');
		})
	})
</script>