jQuery-事件-动画-CSDN博客

本文链接：https://blog.csdn.net/Q_3344/article/details/124353850

本文通过多个案例详细介绍了jQuery中的事件绑定、事件移除、事件传播、动画效果等核心概念。包括点击、悬停、显示/隐藏、滑动、淡入淡出等动画效果的实现，以及自定义动画的运用。案例涵盖了基本操作及高级技巧，旨在帮助读者深入理解jQuery事件和动画机制。

摘要由CSDN通过智能技术生成

jQuery-事件-动画

思维导图

在这里插入图片描述

案例1：绑定事件的两种方式

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<script type="text/javascript">
			$(function(){
	// 1.通过两种方式给div添加鼠标点击事件.
	//方式一
		// $("#da").click(function(){
		// 	console.info("div被点击了")
		// }) 
		
		//方式二
		// $("#da").on("click",function(){
		// 	console.info("div被点击了")
		// })
		
		//方式三
		// $("#da").bind("click",function(){
		// 	console.info("div被点击了")
		// })
	// 2.通过两种方式给div添加鼠标进入事件.
		// $("#da").mouseenter(function(){
		// 	console.info("鼠标进来了")
		// })
		
		// $("#da").mousemove(function(){
		// 	console.info("鼠标进来了")
		// })
		
		// $("#da").on("mouseenter",function(){
		// 	console.info("div被点击了")
		// })
	// 3.通过两种方式给div添加鼠标离开事件.
		// $("#da").mouseleave(function(){
		// 	console.info("鼠标出去了")	
		// })
		
		$("#da").bind("mouseleave",function(){
			console.info("鼠标出去了")
		})
	});
		</script>
	</head>
	<body>
		<div id="da" style="background-color: yellow;width: 200px;height: 100px;">
		</div>
	</body>
</html>```

## 案例2：合成事件（事件切换）

```java
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<div id="da" style="background-color: greenyellow;width: 200px;height: 100px;">
		</div>
		<img src="img/后羿.jpg" id="ia" />
	</body>
	<script type="text/javascript">
			//js方式
			// var ia=document.getElementById("ia");
			// ia.style.display="none";
			$(function(){
				//一开始隐藏照片
				$("#ia").hide();
	// 1.hover:鼠标悬停合成事件
	// 	1.1给div添加鼠标悬停合成事件:打印内容.,
		// $("#da").hover(function(){
		// 	console.info("鼠标悬停合成事件，鼠标进来")
		// },function(){
		// 	console.info("鼠标悬停合成事件，鼠标离开")
		// })
		
	// 	1.2给div添加鼠标悬停合成事件:显示和隐藏图片
	// (图片一开始处于隐藏状态).
		// $("#da").hover(function(){//鼠标进来
		// 	$("#ia").show();	//显示图片
		// },function(){//鼠标离开 
		// 	$("#ia").hide();//隐藏图片
		// })
	// 2. toggle：鼠标点击合成事件.
	// 	2.1给div添加鼠标点击合成事件：显示和隐藏图片
	// (图片一开始处于隐藏状态).
		$("#da").toggle(function(){//奇数点击
			$("#ia").show();	//显示图片
		},function(){//偶数点击
			$("#ia").hide();//隐藏图片
		})
		</script>
</html>```

## 案例3：事件传播(事件冒泡).
```java
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<script type="text/javascript">
			$(function(){
//			1.给span添加鼠标点击事件.
			$("#sa").click(function(){
				console.info("span被点击了")
			})
//			2.给div添加鼠标点击事件.
			$("#da").click(function(){
				console.info("div被点击了")
			})
//			3.给body添加鼠标点击事件.
			$("body ").click(function(){
				console.info("body被点击了")
			})
//			4.点击span，事件传播截止到span.
				$("#sa").click(function(){
				console.info("span被点击了")
				// return false;//事件传播截止到span
			})
//			5.点击span，事件传播截止到div.
			$("#da").click(function(){
				console.info("div被点击了")
				return false;//事件传播截止到div
			})
			});
		</script>
	</head>
	<body>
		<div id="da" style="background-color: aqua;width: 200px;height: 100px;">
			<br />
			<center>
				<span id="sa" style="background-color: yellow;">这是span标签</span>
			<center />
		</div>
	</body>
</html>

案例4：移除事件

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
		<script>
			$(function(){
	// 1.给按钮添加鼠标点击事件，且只能点击一次。 
			// $("#sb").click(function(){
			// 	console.info("按钮被点击了")
			// 	//移除点击事件
			// 	// $("#sb").unbind("click");
			// 	$("#sb").off("click");
			// })
	// 2.给i按钮添加鼠标点击事件,且只能偶数次点击才有效,
	// 奇数次则失效.
				// var i=1;
				// $("#sb").click(function(){
				// 	if(i%2==0){//偶数次
				// 		console.info("按钮被点击了")
				// 	}
				// 	i++;
				// })
				
				// $("#sb").toggle(function(){
				// 	//奇数次
				// },function(){
				// 	//偶数次
				// 	console.info("按钮被点击了")
				// })
	// 3.给按钮添加鼠标点击事件，且只能点击一次,
	// 通过函数one来完成.
			// $("#sb").one("click",function(){
			// 	console.info("按钮被点击了")		
			// })	
			
			});
		</script>
	</head>
	<body>
		<input type="button" id="sb" value="这个按钮不一般" />
	</body>
</html>

案例5：动画-基本动画

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function(){
//			1.给隐藏按钮添加事件：使div在规定的时间内消失。
			$("#hide").click(function(){
				//在一秒内隐藏
				$("#ia").hide(1000);
			})
//			2.给显示按钮添加事件：使div在规定的时间内显示。
			$("#show").click(function(){
				//在一秒内显示
				$("#ia").show(1000);
			})
//			3.给显示/隐藏按钮添加事件：使div在规定的时间内显示和隐藏。
			$("#toggle").toggle(function(){
				//在一秒内隐藏
				$("#ia").hide(1000);
			},function(){
				//在一秒内显示
				$("#ia").show(1000);
			})
//			4.给隐藏按钮添加事件：使div在规定的时间内隐藏，并且显示图片ia。
			
			})
		</script>
	</head>
	<body>
		<input type="button" value="显示" id="show" />
		<input type="button" value="隐藏" id="hide" />
		<input type="button" value="显示/隐藏" id="toggle" />
		<div id="da" style="background-color: deeppink; width: 200px; height: 100px;">
</div><br />
		<img src="img/后羿.jpg" id="ia" />
	</body>
</html>```
## 案例6：动画-滑动动画

```java
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function(){
	// 1.给显示按钮添加鼠标点击事件：使div在指定时间内向下显示.
		$("#show").click(function(){
			$("#da").slideDown(1000);
		})
	// 2.给隐藏按钮添加鼠标点击事件：使div在指定时间内向下隐藏.
		$("#hide").click(function(){
			$("#da").slideUp(1000);
		})
	// 3.给显示/隐藏按钮添加鼠标点击事件：使div在指定时间内向下显示和向下隐藏.
		$("#toggle").toggle(function(){
			$("#da").slideUp(1000);
		},function(){
			$("#da").slideDown(1000);
		})	
			})
		</script>
	</head>
	<body>
		<input type="button" value="显示(向下)" id="show" />
		<input type="button" value="隐藏(向上)" id="hide" />
		<input type="button" value="显示/隐藏" id="toggle" />
		<div id="da" style="background-color: deeppink; width: 240px; height: 500px;">
		</div>
	</body>
</html>```

## 案例7：动画-淡入淡出动画

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function(){
				// 显示(淡入)
				$("#show").click(function(){
					$("#da").fadeIn(1000)
				})
				// 隐藏(淡出)
				$("#hide").click(function(){
					$("#da").fadeOut(1000)
				})
				// 显示/隐藏
				$("#toggle").toggle(function(){
					$("#da").fadeIn(1000)
				},function(){
					$("#da").fadeOut(1000)
				})
			})
		</script>
	</head>
	<body>
		<input type="button" value="淡入" id="show" />
		<input type="button" value="淡出" id="hide" />
		<input type="button" value="淡入/淡出" id="toggle" />
		<div id="da" style="background-color: deeppink; width: 240px; height: 500px;">
		</div>
	</body>
</html>

案例8：动画-自定义动画

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function(){
				// 放大
				$("#big").click(function(){
					$("#da").animate({
						width:450+"px",
						height:450+"px"
					},1000)
				})
				// 缩小
				$("#small").click(function(){
					$("#da").animate({
						width:100+"px",
						height:100+"px"
					},1000)
				})
				// 往右移动
				$("#right").click(function(){
					$("#da").animate({
						// left:300+"px"
						left:'+=100'
					},1000)
				})
				// 往左移动
				$("#left").click(function(){
					$("#da").animate({
						// left:100+"px"
						left:'-=100'
					},1000)
				})
				// 往下移动
				$("#down").click(function(){
					$("#da").animate({
						top:100+"px"
					},1000)
				})
				// 往上移动
				$("#up").click(function(){
					$("#da").animate({
						top:10+"px"
					},1000)
				})
				// 斜下右移动
				$("#xxy").click(function(){
					$("#da").animate({
						top:100+"px",
						left:100+"px"
					},1000)
				})
				// 斜上左移动
				$("#xsz").click(function(){
					$("#da").animate({
						down:100+"px",
						left:100+"px"
					},1000)
				})
			});
		</script>
	</head>
	<body>
		<input type="button" value="上移" id="up" />
		<input type="button" value="下移" id="down" />
		<input type="button" value="右移" id="right" />
		<input type="button" value="左移" id="left" />
		<input type="button" value="放大" id="big" />
		<input type="button" value="缩小" id="small" />
		<input type="button" value="斜下右" id="xxy" />
		<input type="button" value="斜上左" id="xsz" />
		<div id="da" style="background-color: deeppink; width: 300px; height: 300px;position: absolute;">
	</body>
</html>```