animate动画_animate00172バイオジル-优快云博客

本文链接：https://blog.youkuaiyun.com/sundanping_123/article/details/100203886

本文介绍了一个使用Animate进行的滑动选项卡练习，探讨了在实现过程中遇到的无法切换问题及其解决策略。

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

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){

			$('#btn').click(function(){

				$('.box').animate({'width':600},1000,function(){

					$('.box').animate({'height':400},1000,function(){

						$('.box').animate({'opacity':0});

					});
				});

			})


			$('#btn2').click(function(){
				$('.box2').stop().animate({'width':'+=100'});
			})
			


		})



	</script>
	<style type="text/css">
		.box,.box2{
			width:100px;
			height:100px;
			background-color:gold;
		}
	</style>
</head>
<body>
	<input type="button" name="" value="动画" id="btn">
	<div class="box"></div>

	<br />
	<br />
	<input type="button" name="" value="动画" id="btn2">
	<div class="box2"></div>
</body>
</html>

练习：滑动选项卡：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.btns input{
			width:100px;
			height:40px;
			background-color:#ddd;
			border:0;
			outline:none;
		}
		.btns .current{
			background-color:gold;
		}
		.cons{
			width:500px;
			height:300px;
			overflow:hidden;
			position:relative;
		}
		.slides{
			width:1500px;
			height:300px;
			position:absolute;
			left:0;
			top:0;
		}
		.cons .slides div{
			width:500px;
			height:300px;
			background-color:gold;
			text-align:center;
			line-height:300px;
			font-size:30px;
			float:left;
		}

		.cons .active{
			display: block;
		}

	</style>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){
			var $btn = $('.btns input');
			var $slides = $('.cons .slides');

			$btn.click(function(){
				// this 指的是原生的this，它表示当前点击的对象，使用jquery的对象需要用$(this)

				// 当前点击的按钮加上current样式后，除了当前，其他的按钮去掉current样式
				$(this).addClass('current').siblings().removeClass('current');
				$slides.stop().animate({'left':-500*$(this).index()});

				
			})
		})

	</script>
</head>
<body>
	<div class="btns">
		<input type="button" name="" value="01" class="current">
		<input type="button" name="" value="02">
		<input type="button" name="" value="03">
	</div>	
	<div class="cons">
		<div class="slides">
			<div>选项卡一的内容</div>
			<div>选项卡二的内容</div>
			<div>选项卡三的内容</div>
		</div>
	</div>
</body>
</html>

和上一次做的选项卡有同样的问题，不能切换。