jQuery动画效果（王者荣耀手风琴案例）

最新推荐文章于 2024-06-12 20:47:03 发布

煎蛋zai冒泡

最新推荐文章于 2024-06-12 20:47:03 发布

阅读量569

点赞数

文章标签： jquery 动画前端

本文链接：https://blog.csdn.net/weixin_68266487/article/details/127393804

版权

自定义动画：

自定义动画非常强大，通过参数的传递可以模拟以上所有动画，方法为：animate()

（1）语法：

animate(params,[speed],[easing],[fn])

（2）参数：

（1）：params:想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略。

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

（3）：easing:(Optional)用来指定切换效果，默认是“swing”,可用参数“linear”。

（4）:fn:回调函数，在动画完成时执行的函数，每个元素执行一次。

代码案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#content {
				width: 69px;
				height: 69px;
				margin: 10px auto;
				background: url(img/c1.jpg);
				background-size: contain;
			}
		</style>
		<script src="js/jquery.min.js"></script>
		<script type="text/javascript">
			$(function() {
				$("#content").click(function() {
					//$(this).animate(属性值的变化，时间，动画效果，动画完成之后的回调函数)
					$(this).css("background", "url(img/c.png)").animate({
						width: 224,
						height: 69,
					}, 1000)
				})
			})
		</script>
	</head>
	<body>
		<div id="content">
		</div>
	</body>
</html>

停止动画排队

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果的排队执行。

停止动画排队的方法为：stop（）；

stop() 方法用于停止动画或效果。

stop() 写到动画或者效果的前面，相当于停止结束上一次的动画。

总结：每次使用动画之前，先调用stop(),再调用动画

王者手风琴代码案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}

			ul li {
				list-style: none;
			}

			a {
				text-decoration: none;
			}

			#content {
				width: 780px;
				height: 69px;
				margin: 10px auto;
				background: url(img/bg.png);
				padding: 10px;
			}

			#content ul li {
				width: 69px;
				height: 60px;
				float: left;
				overflow: hidden;
				margin-left: 10px;
				border-radius: 5px;
				/* border: 1px firebrick solid; */
			}

			#content ul .current {
				width: 224px;
			}

			.current .big {
				display: block;
			}

			.current .small {
				display: block;
			}

			.small {
				width: 69px;
				height: 69px;
				position: relative;
			}

			.big {
				display: none;
				position: relative;
			}
		</style>
		<script src="js/jquery.min.js"></script>
		<script type="text/javascript">
			$(function() {

				//最基础版
				$("#content ul  li").mouseover(function() {
					//1：鼠标放入li，让当前的li变宽，其他同级元素变窄
					$(this).animate({
						width: 224,
					}).siblings().animate({
						width:69,
					})

					//2：更改当前li里边的图片的显示，小的隐藏
					$(this).find(".big").stop().fadeIn();
					$(this).find(".small").stop().fadeOut();

					//2：更改当前li里边的图片的隐藏，小的显示
					$(this).siblings().find(".big").stop().fadeOut();
					$(this).siblings().find(".small").stop().show();
				})


				/* //优化方法

				$("#content ul  li").mouseover(function() {
					$(this).animate({
						width: 224,
					}).find(".big").stop().fadeIn().siblings().stop().fadeOut()
					$(this).siblings().animate({
						width: 69,
					}).find(".big").stop().fadeOut().siblings().stop().fadeIn()
				}) */

			})
		</script>
	</head>
	<body>
		<div id="content">
			<ul>
				<li class="current">
					<img src="img/c.png" class="big">
					<img src="img/c1.jpg" class="small">
				</li>
				<li><img src="img/h.png" class="big">
					<img src="img/h1.jpg" class="small">
				</li>
				<li><img src="img/l.png" class="big">
					<img src="img/l1.jpg" class="small">
				</li>
				<li><img src="img/m.png" class="big">
					<img src="img/m1.jpg" class="small">
				</li>
				<li><img src="img/t.png" class="big">
					<img src="img/t1.jpg" class="small">
				</li>
				<li><img src="img/w.png" class="big">
					<img src="img/w1.jpg" class="small">
				</li>
				<li><img src="img/z.png" class="big">
					<img src="img/z1.jpg" class="small">
				</li>
			</ul>
		</div>
	</body>
</html>

煎蛋zai冒泡

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
jQuery动画效果（王者荣耀手风琴案例）

自定义动画非常强大，通过参数的传递可以模拟以上所有动画，方法为：animate()（2）参数：（1）：params:想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略。（2）：speed：三种预定速度之一的字符串（“slow”,\"normal\" ,or\"fast\"）或表示动画时长的毫秒数值（如：1000）。
复制链接

扫一扫