jquery事件续+动画-CSDN博客

本文链接：https://blog.csdn.net/SJH184554558/article/details/135742008

本文详细介绍了JavaScript中的表单事件如submit验证、change事件的应用，以及滚动事件的检测、基础动画（展示/隐藏、下拉/上滑、淡入淡出）和自定义动画的实现，通过实例展示了如何在HTML和JavaScript中使用这些功能。

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

🥇表单事件

🥇change事件

🥇滚动事件

🥇动画

🥈基本动画

🥉展示和隐藏

🥉下拉和上滑

🥉淡入和淡出

🥈自定义动画

表单事件

<body>
		<form action="01_05.html">
			输入框：<input type="text" /><br />
			<input type="submit" />
		</form>
		<script>
			$("form").submit(function(){
				var cont = $("input:eq(0)").val();
				if(cont == "挥发的石灰"){
					return true;
				}else{
					return false;
				}
			})
		</script>
	</body>

return trun会允许提交，就会跳转页面，return false则不允许提交。

change事件

    <body>
		<select >
			<option value="-1">选择内容</option>
			<option value="1">内容1</option>
			<option value="2">内容2</option>
			<option value="3">内容3</option>
		</select>
		
		<script>
			$("select").change(function(){
				console.log($(this).val());
			})
		</script>
	</body>

滚动事件

        <style>
			nav {
				height: 4000px;
			}

			div {
				height: 100px;
				width: 100%;
				background-color: aqua;
				display: none;
				position: fixed;
				top: 0px;
				right: 0;
			}
		</style>

<body>
		<nav>
			<div></div>
		</nav>

		<script>
			$(document).scroll(function() {
				if ($(this).scrollTop() > 200) {
					$("div").show(500);
				}else{
					$("div").hide(500)
				}
			})
		</script>
	</body>

动画

基本动画

展示和隐藏

<body>
		<button>展示</button>
		<button>隐藏</button>
		<button>切换</button>
		<div style="width: 60px;height: 40px;background-color: aqua;">
			
		</div>
		
		<script>
			$("button").eq(0).click(function(){
			
				$("div").show(500);
			})
			$("button").eq(1).click(function(){
				
				$("div").hide(500);
			})
			$("button").eq(2).click(function(){
				
				$("div").toggle(500);
			})
		</script>

下拉和上滑

<body>
		<button>下拉</button>
		<button>上滑</button>
		<button>切换</button>
		<div style="width: 60px;height: 40px;background-color: aqua;">
			
		</div>
		
		<script>
			$("button").eq(0).click(function(){
				
				$("div").slideDown(500);
			})
			$("button").eq(1).click(function(){
				
				$("div").slideUp(500);
			})
			$("button").eq(2).click(function(){
				
				$("div").slideToggle(500);
			})
		</script>
	</body>

淡入和淡出

<body>
		<button>淡入</button>
		<button>淡出</button>
		<button>切换</button>
		<button>淡出一定程度</button>
		<div style="width: 60px;height: 40px;background-color: aqua;">
			
		</div>
		
		<script>
			$("button").eq(0).click(function(){
				
				$("div").fadeIn(500);
			})
			$("button").eq(1).click(function(){
				
				$("div").fadeOut(500);
			})
			$("button").eq(2).click(function(){
				
				$("div").fadeToggle(500);
			})
			$("button").eq(3).click(function(){
				
				$("div").fadeTo(500,0.3);
			})
		</script>
	</body>

自定义动画

点赞案例：

<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.min.js"></script>
		<style>
			div{
				width: 100%;
				height: 100px;
				background-color: deepskyblue;
			}
			img,button{
				display: block;
				margin: auto;
				position: relative;
				top: 60px;
			}
			img{
				width: 14px;
				height: 14px;
				opacity: 0;
			}
		</style>
	</head>
	<body>
		<div>
			<img src="img/爱心.png" alt="" />
			<button>点赞</button>
		</div>
		
		<script>
			$("button").click(function(){
				$("img").css("opacity","1")
				$("img").animate(
					{
						opacity:0,
						top:10
					},400,linear,function(){
						//回到原来位置
						$("img").css("top","60px")
					}
				)
			})
		</script>
	</body>