jQuery(动画效果)

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{
    width: 200px;
    height:200px;
    background:chartreuse;
}

执行效果：

最初页面：

点击切换  发现div被隐藏了

再次点击切换，div重新显示出来：

----------------------------

 

自定义动画一(同步动画：动画效果同时进行展现)：

 

//自定义动画  animate()里边可以传入三个参数  第一个参数就是自定义动画执行效果  第二个参数是执行速度  第三个参数是回调函数 执行动画之后 自动调用

 

 

 

自定义动画二(列队动画：动画效果按照设定的顺序进行显示)：

通过连缀或者顺序这两种方式时 针对的是同一个元素进行列队动画

针对不同元素进行列队动画的时候，只能通过回调函数来实现列队动画

 

 

 

 

posted @ 2017-05-11 17:16  乔克叔叔  阅读(244)  评论(0)  编辑  收藏  举报