1.例子：选项卡
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>选项卡</title>
<script type="text/javascript" src="../jQuery库/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){ var $btn = $(‘.btns input‘); var $slide = $(‘.cons .slide‘); /*alert($div.length),判断是否获取*/ $btn.click(function(){ /*移出除当前的类，siblings选择同辈元素*/ $(this).addClass(‘current‘).siblings().removeClass(‘current‘); /*index（）显示索引*/ /*$div.eq($(this).index()).addClass(‘div1‘).siblings().removeClass(‘div1‘);*/ /*stop()防止重复点击，animate（）动画效果*/ $slide.stop().animate({‘left‘:-500*$(this).index()}); })})</script><style type="text/css">
.btns input{ width: 100px; height: 40px; background-color: antiquewhite; border: 0;/*给宽高会有边框*/}.btns .current{ background-color: aqua;}.cons{ width: 500px; height: 200px; overflow: hidden; position: relative;}.slide{ width: 1500px; height: 200px; position: absolute; left: 0; top: 0;}.cons .slide div{ width: 500px; height: 200px; background-color: aquamarine; line-height: 200px; text-align: center; font-size: 30px; float: left;}/*.cons .div1{ display: block;}*/</style></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="slide"> <div>选项卡1</div> <div>选项卡2</div> <div>选项卡3</div> </div></div></body>
</html>
2.animate动画
可以设置元素某属性值上的动画，可以设置一个或多个属性值，动画执行完成后会执行一个函数
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>动画</title>
<script type="text/javascript" src="../jQuery库/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){ $(‘#btn‘).click(function(){ /*分步执行，延时1000ms*/ $(‘.box‘).animate({‘width‘:100},1000,function(){ $(‘.box‘).animate({‘height‘:100},1000,function(){ $(‘.box‘).animate({‘opacity‘:0.4}); }); }); }) $(‘#btn01‘).click(function(){ /*每次点击加一百*/ $(‘.box01‘).stop().animate({‘width‘:‘+=100‘}) })})</script><style type="text/css">
.box,.box01{ width: 300px; height: 300px; background-color: antiquewhite;}</style></head>
<body>
<input type="button" value="动画" id="btn"><div class="box"></div><br><br><input type="button" value="动画" id="btn01"><div class="box01"></div></body>
</html>
