zoukankan      html  css  js  c++  java
  • 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{
         200px;
        height:200px;
        background:chartreuse;
    }
    

    执行效果:

    最初页面:

    点击切换  发现div被隐藏了

    再次点击切换,div重新显示出来:

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

     

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

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

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

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

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

     

  • 相关阅读:
    文件包含漏洞
    命令执行漏洞详解
    CSRF跨站请求伪造
    XSS跨站脚本攻击详解
    SQL盲注
    字符型注入、数字型注入、搜索型注入
    AWVS13扫描类型profile_id对照表
    Cobalt Strike 和 Metasploit Framework 联动
    msf常用命令
    上传嵌入式python环境进行渗透测试
  • 原文地址:https://www.cnblogs.com/Joke-Jay/p/6838451.html
Copyright © 2011-2022 走看看