jQuery04-事件-动画-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_67140851/article/details/124353892

本文通过多个案例展示了jQuery中事件的绑定、事件切换、事件传播、移除事件以及动画效果的实现，包括基本动画、滑动动画、淡入淡出和自定义动画。案例详细演示了如何使用hover、toggle、click等方法以及animate函数来控制元素的行为和视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery04-事件-动画

1 思维导图
2 案例1：绑定事件的两种方式
3 案例2：合成事件（事件切换）
4 案例3：事件传播(事件冒泡)
5 案例4：移除事件
6 案例5：动画-基本动画
7 案例6：动画-滑动动画
8 案例7：动画-淡入淡出动画
9 案例8：动画-自定义动画

1 思维导图

在这里插入图片描述

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

<!DOCTYPE html>
<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(){
		// 	alert("div被点击了！")
		// })

	    // $("#da").on("click",function(){alert("div被点击")})
	    // $("#da").bind("click",function(){alert("div被点击")})

//	2.通过两种方式给div添加鼠标进入事件.
        // $("#da").mouseenter(function(){
        // 	alert("鼠标进入！")
        // });

        // $("#da").on("mouseenter",function(){alert("鼠标进入！")})

        // $("#da").bind("mouseenter",function(){alert("鼠标进入！")})

//	3.通过两种方式给div添加鼠标离开事件.
        // $("#da").mouseleave(function(){
        // 	alert("鼠标离开！")
        // });

        // $("#da").on("mouseleave",function(){alert("鼠标离开")})

        // $("#da").bind("mouseleave",function(){alert("鼠标离开")})
})
		</script>
	</head>
	<body>
		<div id="da" style="background-color:pink;width: 200px;height: 100px;">
		</div>
	</body>
</html>

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
		</head>
    <body>
		<div id="da" style="background-color:peachpuff;width: 200px;height: 100px;">

		</div>
		<img src="img/1.jpg" id="ia" style="width: 500px;height: 100px;"/>

	</body>
		<script type="text/javascript">

		// js方式
		// var a = document.getElementById("#da");
		// a.style.display = "none"

		$(function(){
			//hover:鼠标悬停合成事件
			//给div添加鼠标悬停合成事件:打印内容
			// $("#da").hover(function(){console.info("鼠标进去")},function(){console.info("鼠标出去")});
			//给div添加鼠标悬停合成事件:显示和隐藏图片(图片一开始处于隐藏状态).
			// $("#da").hover(function(){$("#ia").hide()},function(){$("#ia").show()});
			//toggle：鼠标点击合成事件.
			//给div添加鼠标点击合成事件：显示和隐藏图片(图片一开始处于隐藏状态).
			// $("#da").toggle(function(){$("#ia").hide()},function(){$("#ia").show()});
		})

		</script>
	
	
</html>

4 案例3：事件传播(事件冒泡)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">

		$(function(){
	//给span添加鼠标点击事件.
	$("#sa").click(function(){
		console.info("span被点击了");
		//点击span，事件传播截止到span.
		return false;
		})

	//给div添加鼠标点击事件.
	$("#da").click(function(){
		console.info("div被点击了");
		//点击span，事件传播截止到div.
		return false;
	})

	//给body添加鼠标点击事件.
	$("body").click(function(){
		console.info("body被点击了");
	})

		})

		</script>
	</head>
	<body>
		<div id="da" style="background-color: aqua;width: 200px;height: 100px;">
			<br />
			<center>
				<span id="sa" style="background-color:coral;">span标签</span>
			<center />
		</div>
	</body>
</html>

5 案例4：移除事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
		<script>
		$(function(){
//给按钮添加鼠标点击事件，且只能点击一次。
 // $("#sb").click(function(){
	//  console.info("鼠标点击")
	//  $("#sb").unbind("click")
	//  $("#sb").off("click")
 // })

// 给i按钮添加鼠标点击事件,且只能偶数次点击才有效,奇数次则失效.
//方式一：
// var i = 1;
// $("#sb").click(function(){
// 	if(i%2==0){
// 		console.info("鼠标点击")
// 	}
// 	i++;
// })

//.方式二
// $("#sb").toggle(function(){ $("#sb").unbind("click")},function(){console.info("鼠标点击")})
// 给按钮添加鼠标点击事件，且只能点击一次,通过函数one来完成.	
$("#sb").one("click",function(){
	console.info("鼠标点击")
  })
		})

		</script>
	</head>
	<body>
		<input type="button" id="sb" value="sss" />
	</body>
</html>

6 案例5：动画-基本动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.7.2.js"></script>
		<script type="text/javascript">
		$(function(){
		//给隐藏按钮添加事件：使div在规定的时间内消失。
		// $("#hide").click(function(){
		// 	$("#da").hide(1000);
		// })

		//给显示按钮添加事件：使div在规定的时间内显示。
		// $("#hide").click(function(){
		// 	$("#da").show(1000);
		// })

		//给显示/隐藏按钮添加事件：使div在规定的时间内显示和隐藏。
		// $("#toggle").toggle(function(){$("#da").hide(1000)},function(){$("#da").show(1000)})

		//给隐藏按钮添加事件：使div在规定的时间内隐藏，并且显示图片ia。
		// $("#hide").click(function(){$("#da").hide(1000),$("#ia").show(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: 200px; height: 100px;">
</div><br />
		<img src="img/微信图片_20220421162227.jpg" id="ia" width="100px"height="100px"style="display: none;"/>
	</body>
</html>

7 案例6：动画-滑动动画

<!DOCTYPE html>
<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(){
	//给显示按钮添加鼠标点击事件：使div在指定时间内向下显示.
	$("#show").click(function(){
		$("#da").slideDown(5000);
	})

	//给隐藏按钮添加鼠标点击事件：使div在指定时间内向下隐藏.
	$("#hide").click(function(){
		$("#da").slideUp(5000);
	})

	//给显示/隐藏按钮添加鼠标点击事件：使div在指定时间内向下显示和向下隐藏.	
			$("#toggle").toggle(function(){$("#da").slideUp(3000)},function(){$("#da").slideDown(3000)})
			})

		</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: pink; width: 240px; height: 500px;">
		</div>
	</body>
</html>

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

<!DOCTYPE html>
<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").fadeOut(1000)},function(){$("#da").fadeIn(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: coral; width: 240px; height: 500px;">
		</div>
	</body>
</html>

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

<!DOCTYPE html>
<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:500 +"px",
						height:500 +"px"
					},1000)
				})

				// 缩小
				$("#small").click(function(){
					$("#da").animate({
						width:300+"px",
						height:300+"px"
					},2000)
				})

				// 往右移动
				$("#right").click(function(){
					$("#da").animate({
						left:500+"px",
					},2000)
				})

				// 往左移动
				$("#left").click(function(){
					$("#da").animate({
						left:300+"px",
					},2000)
				})

				// 往下移动
				$("#down").click(function(){
					$("#da").animate({
						top:300+"px",
					},2000)
				})
				// 往上移动
				$("#up").click(function(){
					$("#da").animate({
						top:200+"px"
					},2000)
				})

				// 斜下右移动
				$("#xxy").click(function(){
					$("#da").animate({
						top:300+"px",
						right:300+"px"
					},2000)
				})

				// 斜上左移动
				$("#xsz").click(function(){
					$("#da").animate({
						top:100+"px",
						left:100+"px"
					},2000)
				})
			});
		</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: pink; width: 100px; height: 100px;position: absolute;">
	</body>
</html>