js代码：
1 //需求是 当第一个显示完毕之后 第二个再显示 依次类推 隐藏的时候也是逐个隐藏 2 $('.show').click(function () { 3 $("div").eq(0).show(400, function () { 4 $('div').eq(1).show(400, function () { 5 $('div').eq(2).show(400, function () { 6 $('div').eq(3).show(400); 7 }) 8 }) 9 }); 10 }); 11 $('.hide').click(function () { 12 $("div").eq(0).hide(400, function () { 13 $('div').eq(1).hide(400, function () { 14 $('div').eq(2).hide(400, function () { 15 $('div').eq(3).hide(400); 16 }) 17 }) 18 }); 19 }); 20 21 //上边的方法虽然很好理解 但是代码过于繁杂 下面使用递归的方式 完成上面的功能 22 $('.show').click(function () { 23 $('.test').first().show(400,function A(){ 24 $(this).next().show(400,A); 25 }) 26 }); 27 $('.hide').click(function () { 28 $('.test').last().hide(400,function B(){ 29 $(this).prev().hide(400,B); 30 }) 31 });
html代码：
1 <div class="text">你</div> 2 <div class="text">好</div> 3 <div class="text">吗</div> 4 <div class="text">？</div> 5 <input type="button" value="显示" class="show"/> 6 <input type="button" value="隐藏" class="hide"/>
两个按钮合并成一个按钮，使用jQuery封装好的函数，判断是否隐藏或者显示，然后自动进行切换
代码实践：
html代码：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>事件对象</title> 6 <script type="text/javascript" src="jquery-1.10.1.js"></script> 7 <script type="text/javascript" src="ShiJianObject.js"></script> 8 <link rel="stylesheet" href="ShiJianObject.css" type="text/css"/> 9 </head> 10 <body> 11 <input type="button" value="切换" class="toggle"/> 12 <div id="box"></div> 13 </body> 14 </html>
js代码：
1 $(function () { 2 $('.toggle').click(function () { 3 $('#box').toggle(400);//这个函数就是隐藏或者显示 这两种动画直接进行切换 目标div块.toggle(动画参数); 4 // 每次单击 调用click处理函数 执行$('#box').toggle(400) jQuery完成了封装 帮助我们进行了判断 5 // 如果是隐藏的 那么就进行显示操作 如果是显示的 那么就进行隐藏操作 6 });
css样式表：
#box{
200px;
height:200px;
background:chartreuse;
}
执行效果：
最初页面：
点击切换 发现div被隐藏了
再次点击切换，div重新显示出来：
----------------------------
自定义动画一(同步动画：动画效果同时进行展现)：
//自定义动画 animate()里边可以传入三个参数 第一个参数就是自定义动画执行效果 第二个参数是执行速度 第三个参数是回调函数 执行动画之后 自动调用
自定义动画二(列队动画：动画效果按照设定的顺序进行显示)：
通过连缀或者顺序这两种方式时 针对的是同一个元素进行列队动画
针对不同元素进行列队动画的时候，只能通过回调函数来实现列队动画
