<!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>
jQuery animate动画
原文地址：http://blog.51cto.com/13742773/2339950