jquery动画效果

最新推荐文章于 2023-09-21 00:36:34 发布

菜汪在路上

最新推荐文章于 2023-09-21 00:36:34 发布

阅读量288

点赞数

分类专栏： js 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/qx020814/article/details/126033318

版权

js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

显示于隐藏方法：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<script src="../jQuery3.6.0.js"></script>
		<script>
			$(function() {
				$("#anniu").click(function() {
					if ($("#anniu").val() == "显示") {
						$("#img1").show("slow", function() {
							$("#img1").css({
								"border": "1px solid red",
								"background-color": "red"
							});
						});
						$("#anniu").val("隐藏");
					} else {
						$("#img1").hide("slow");
						$("#anniu").val("显示")
					}
				});
			});
		</script>
	</head>
	<body>
		<img style="display: none;" src="../img/3.png" id="img1" />
		<br/>
		<input type="button" value="显示" id="anniu" />
	</body>
</html>

多个参数时可以用“{}”包起来，用“,”隔开

隐藏与显示之间切换：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}

			body {
				font-size: 12px;
			}

			ul {
				list-style: none;

			}

			ul li {
				height: 30px;
				width: 100px;
				text-align: center;
				border: 1px solid paleturquoise;
				border-bottom: none;
			}

			ul li a {
				text-decoration: none;
			}

			ul li.img1 {
				background-image: url(../img/up.png);
				background-repeat: no-repeat;
				border-top: 1px solid paleturquoise;
				border-right: 0;
			}
			ul li.down{
				background-image: url(../img/end.png);
			}
		</style>
		<script src="../jQuery3.6.0.js"></script>
		<script>
			$(function(){
				$(".img1").click(function(){
					$("#div1 li:gt(5):not(:last)").fadeToggle();
					$(".img1").toggleClass("down");
				});
			});
		</script>
	</head>
	<body id="div1">
		<ul>
			<li><a href="#">9快9包邮</a></li>
			<li><a href="#">大货精选</a></li>
			<li><a href="#">海外海购</a></li>
			<li><a href="#">大厂直销</a></li>
			<li><a href="#">超值抢购</a></li>
			<li><a href="#">家电办公</a></li>
			<li><a href="#">母婴用品</a></li>
			<li><a href="#">护肤美容</a></li>
			<li><a href="#">手机数码</a></li>
			<li><a href="#">户外运动</a></li>
			<li><a href="#">家具家电</a></li>
			<li class="img1"></li>
		</ul>
	</body>
</html>

fadeToggle方法会检测是否隐藏或显示，来回之间互相切换

缓慢出现和缓慢隐藏：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<script src="../jQuery3.6.0.js"></script>
		<script>
			$(function() {
				$("#anniu").click(function() {
					if ($("#anniu").val() == "显示") {
						$("#img1").fadeIn("slow", function() {
							$("#img1").css({
								"border": "1px solid red",
								"background-color": "red"
							});
						});
						$("#anniu").val("隐藏");
					} else {
						$("#img1").fadeOut("slow");
						$("#anniu").val("显示")
					}
				});
			});
		</script>
	</head>
	<body>
		<img style="display: none;" src="../img/3.png" id="img1" />
		<br/>
		<input type="button" value="显示" id="anniu" />
	</body>
</html>

通过下拉框改变透明度：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<script src="../jQuery3.6.0.js"></script>
		<script>
			$(function(){
				$("#sel").change(function(){
					var date=$("#sel").val();
					$("#img").fadeTo(1000,date);
				});
			});
		</script>
	</head>
	<body>
		<img src="../img/ys.png" id="img"/>
		<select id="sel">
			<option value="0.2">0.2</option>
			<option value="0.4">0.4</option>
			<option value="0.6">0.6</option>
			<option value="0.8">0.8</option>
			<option value="1" selected="selected">1</option>
		</select>
	</body>
</html>

鼠标悬浮、点击：显示、隐藏：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}

			#ul1 {
				list-style: none;
			}

			#ul1 li {
				width: 120px;
				float: left;
				margin-left: 20px;
			}

			#ul1 li ul li {
				width: 100px;
				float: none;
				list-style: none;
				border: 1px solid red;
				display: none;
			}
		</style>
		<script src="../jQuery3.6.0.js"></script>
		<script>
			$(function() {
                //点击显示、隐藏
				// $("#rmyy").click(function(){
				// 	$("#rmyy ul li").stop(true,false).slideToggle(250);
				// });
				$("#rmyy").hover(function() {
					$("#rmyy ul li").slideDown(250);
				}, function() {
					$("#rmyy ul li").stop(true, false).slideUp(250);
				});
			});
		</script>
	</head>
	<body>
		<ul id="ul1">
			<li id="rmyy"><a href="#">热门音乐</a>
				<ul>
					<li><a href="#">江南stal</a></li>
					<li>错错错</li>
					<li>御剑飞行</li>
				</ul>
			</li>
			<li>我的音乐</li>
			<li>联系商家</li>
			<li>我的VIP</li>
		</ul>
	</body>
</html>

自定义动画：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<script src="../jQuery3.6.0.js"></script>
		<script>
			$(function() {
				$("#img1").click(function() {
					$(this).animate({
						width: "500px"
					}, "slow");
					$(this).animate({
						height: "200px"
					}, "slow");
					$(this).animate({
						width: "200px"
					}, "slow");
					$(this).animate({
						height: "50px"
					}, "slow");
				});
			});
		</script>


	</head>
	<body id="div1">
		<img src="../img/3.png" id="img1" />
	</body>
</html>

利用animate方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<script src="../jQuery3.6.0.js"></script>
		<script>
			$(function() {
				$("#img1").click(function() {
					$(this).animate({left:"+=100px",top:"+=100px",opacity:0.5},3000);
				});
			});
		</script>
		<style>
			#img1{
				position: absolute;
			}
		</style>
	</head>
	<body id="div1">
		<img src="../img/3.png" id="img1" />
	</body>
</html>