第8章 jQuery动画与特效-优快云博客

本文链接：https://blog.youkuaiyun.com/sinat_35450260/article/details/143458912

JavaScript交互式网页设计-T8（jQuery动画与特效）

jQuery API：https://jquery.cuishifeng.cn/

一、显示与隐藏效果

显示：show([speed],[easing],[fn]])

隐藏：hide([speed],[easing],[fn]])
切换显示与隐藏：toggle([speed],[easing],[fn]])

参数说明：

speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

easing：(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

fn：在动画完成时执行的函数，每个元素执行一次。

一般情况下，在使用过程中，基本不需要设置参数。

如果使用的过程中出现队列的情况（同一时间多个效果同时显示），可以在动画效果方法之前加上 stop() 方法，如：
$("div").stop().slideToggle();

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>显示与隐藏</title>
		<script src="js/jquery-3.6.1.min.js"></script>
		<style>
			div{
     
				width: 300px;
				height: 500px;
				background-color: red;
				/* 默认隐藏 */
				display: none;
			}
		</style>
	</head>
	<body>
		<input type="button" id="show" value="显示div">
		<input type="button" id="hide" value="隐藏div">
		<input type="button" id="toggle" value="切换显示与隐藏div">
		<div></div>
		
		<script>
			$(function(){
     
				// 显示
				$("#show").click(function(){
     
					$("div").show(2000);
				})
				// 隐藏
				$("#hide").click(function(){
     
					$("div").hide(1000,function(){
     
						alert("隐藏成功");
					});
				})
				// 切换
				$("#toggle").click(function(){
     
					$("div").toggle();
				})
			})
		</script>
	</body>
</html>

使用鼠标悬停实现对应效果：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>显示与隐藏</title>
		<script src="js/jquery-3.6.1.min.js"></script>
		<style>
			div{
     
				width: 300px;
				height: 500px;
				background-color: red;
				/* 默认隐藏 */
				display: none;
			}
		</style>
	</head>
	<body>
		<input type="button" id="show_hide"