.show()　　.hide()　　.toggle()

　　.fadeIn()　　.fadeout()　　.fadeToggle()　　.fadeTo()

　　.slideDown()　　.slideUp()　　.slideToggle()

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

　　.show()

显示匹配的元素   （注意点：显示的时候，会回到你设置的 display值 如果设置 block 就是 block，如果没有设置， 例如 p 标签就回到 liline， div 就回到 block ）

参数: null 或 (duration, easing, callblack)

duration: 为 毫秒。 动画 展示过程的 时间。 例如 1000   就是 用1秒的时间，展示这个过程，

easing:  jQuery自身提供"linear" 和 "swing"，其他效果可以使用jQuery Easing Plugin插件,  linear  为匀速运动

callblack: 为回调函数，  这个动画结束后执行的函数

　　.hide()

隐藏匹配的元素

参数: null 或 (duration, easing, callblack)

duration: 为 毫秒。 动画 展示过程的 时间。 例如 1000   就是 用1秒的时间，展示这个过程，

easing:  jQuery自身提供"linear" 和 "swing"，其他效果可以使用jQuery Easing Plugin插件,  linear  为匀速运动

callblack: 为回调函数，  这个动画结束后执行的函数

 1 <!DOCTYPE html>

 2 <html lang="en">

 3 <head>

 4     <meta charset="UTF-8">

 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">

 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">

 7     <title>Document</title>

 8     <style>

 9         div{

10             width:100px;

11             border:1px solid black;

12         }

13         li{

14             display: none;

15         }

16     </style>

17 </head>

18 <body>

19

20     <div>

21         <ul>城市

22             <li>北京市</li>

23             <li>广州市</li>

24             <li>深圳市</li>

25             <li>上海</li>

26         </ul>

27     </div>

28

29     <script src="./jquery/jquery.js"></script>

30     <script>

31

32         $('ul').on('click', function(){

33             if($(this).find('li').css('display') == 'none'){

34                 $(this).find('li').show(3000);

35             }else{

36                 $(this).find('li').hide(3000);

37             }

38

39         })

40     </script>

41 </body>

42 </html>

　　.toggle()

切换效果，跟上面的代码执行结果一样， 可以说是简写了。

参数： 跟上面的一样

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        div{

            width:100px;

            border:1px solid black;

        }

        li{

            display: none;

        }

    </style>

</head>

<body>

    <div>

        <ul>城市

            <li>北京市</li>

            <li>广州市</li>

            <li>深圳市</li>

            <li>上海</li>

        </ul>

    </div>

    <script src="./jquery/jquery.js"></script>

    <script>

        // $('ul').on('click', function(){

        //     if($(this).find('li').css('display') == 'none'){

        //         $(this).find('li').show(3000);

        //     }else{

        //         $(this).find('li').hide(3000);

        //     }

        // })

        //跟上面的代码效果一样

        $('ul').on('click', function(){

            $(this).find('li').toggle();

        })

    </script>

</body>

</html>

　　.fadeln()

通过淡入的方式显示匹配元素。  通俗一点来讲就是， 透明度从 0.1 到  1  的过程 

参数跟 show()  和 hide()方法一样

　  .fadeOut()

通过淡出的方式隐藏匹配元素。

1 $('ul').on('click', function(){

2         if($(this).find('li').css('display') == 'none'){

3             $(this).find('li').fadeIn(3000);

4         }else{

5             $(this).find('li').fadeOut(3000);

6         }

7 })

　　.fadeToggle()

切换的 简写

 1 <script>

 2

 3         // $('ul').on('click', function(){

 4         //     if($(this).find('li').css('display') == 'none'){

 5         //         $(this).find('li').fadeIn(3000);

 6         //     }else{

 7         //         $(this).find('li').fadeOut(3000);

 8         //     }

 9         // })

10

11         //跟上面的代码效果一样

12         $('ul').on('click', function(){

13             $(this).find('li').fadeToggle(3000);

14         })

15 </script>

　　.fadeTo()

变化到 哪里停，  参数跟上面的都一样， 不过加了 第二参数 , 第二参数 为， 到哪里就停止，  填透明值 0 ~ 1

 参数: null 或 (duration,[opacity] ,easing, callblack)

.slideDown()　　.slideUp()　　.slideToggle()  等方法，上面方法，调的是透明度，  这些方法调的是  高度 

jQuery 第六章 实例方法 动画的更多相关文章

  1. jQuery 第五章 实例方法 详解动画之animate()方法

    .animate()   .stop()   .finish() ------------------------------------------------------------------- ...

  2. jQuery第六章

    jQuery与Ajax应用 一.Ajax的优势和不足 1.Ajax的优势: (1)不需要插件支持:不需要任何浏览器插件就可以被绝大多数浏览器支持 (2)优秀的用户体验:能在不刷新整个页面的前提下更新数 ...

  3. jQuery 第六章 jQuery在Ajax应用

    1.本章目标 ajax 2.ajax 异步刷新技术,我们的网页不需要全部刷新,按需实现局部刷新,上线后台的交互 用户体验好 地图,前台验证,表单提交,修改,查询等等 原生的js和ajax packag ...

  4. jQuery 第五章 实例方法 详解内置队列queue() dequeue() 方法

    .queue() .dequeue() .clearQueue() ------------------------------------------------------------------ ...

  5. jQuery 第五章 实例方法 事件

    .on() .one() .off() .trigger() .click / keydown / mouseenter ...    .hover() ----------------------- ...

  6. jQuery 第四章 实例方法 DOM操作之data方法

    jquery 里面 的 data 方法比较重要, 所以成一个模块写: 首先, 得知道 data()  干嘛用的, 看淘宝上 有自定义的属性, 为data -  什么什么,   这是为了dom 跟数据有 ...

  7. jQuery 第四章 实例方法 DOM操作_基于jQuery对象增删改查相关方法

    .next() .prev() .nextAll() .prevAll() .prevUntil() .nextUntli() .siblings() .children() .parent() .p ...

  8. jQuery 第七章 实例方法 位置图形

    位置坐标图形大小相关方法: .offset() .position() .scrollTop() .scrollLeft() .width() .height() .innerWidth() inne ...

  9. 进击的Python【第十六章】：Web前端基础之jQuery

    进击的Python[第十六章]:Web前端基础之jQuery 一.什么是 jQuery ? jQuery是一个JavaScript函数库. jQuery是一个轻量级的"写的少,做的多&quo ...

随机推荐

  1. Java数据结构-02单链表（一）

    一.链式存储: ①简述:线性表的链式存储结构的特点是用一组任意的存储单元存储线性表的数据元素,这组存储单元可以是连续的,也可以是不连续的.存储单元由两部分组成,数据源和指针,数据源放数据,指针指向下个 ...

  2. 配置交换机之间直连链路聚合-LACP模式

    组网图形 LACP模式链路聚合简介 以太网链路聚合是指将多条以太网物理链路捆绑在一起成为一条逻辑链路,从而实现增加链路带宽的目的.链路聚合分为手工模式和LACP模式. LACP模式需要有链路聚合控制协 ...

  3. 4G DTU的通信距离是多少

    4G是现今应用非常广泛的一种通信技术,主要是为广义的远程信息处理提供服务.随着计算机与各种具有处理功能的智能设备在各领域的日益广泛使用,数据通信的应用范围也日益扩大.在物联网领域中,4G是移动设备实现 ...

  4. Java学习的第六天

    1.今天学习了各种运算符, 还有选择结构,循环结构 2.今天学习没有遇到困难. 3.明天学习数组和第三章的开头一部分.

  5. Windows 端口被占用，但进程号对应的进程不存在，使用Get-Process来查找进程挺方便的

    Windows上很少安装数据库,这次遇到一个小问题:数据库启动之后提示: 警告: 无法为 "*" 创建监听套接字 致命错误: 无法创建TCP/IP套接字 日志: 数据库系统已关闭 ...

  6. 通过Azure bot framework composer 设计一个AI对话机器人bot（查询天气）

    本文介绍通过机器人框架设计器 (Bot framework composer)接近拖拉拽的方式设计一个聊天机器人,该聊天机器人的主要功能是发起http请求查询天气.当然,稍微变通下,可以用来查询几乎任 ...

  7. c100k

    sysctl -w fs.file-max=10485760 #系统允许的文件描述符数量10msysctl -w net.ipv4.tcp_rmem=1024 #每个tcp连接的读取缓冲区1k,一个连 ...

  8. 读书笔记：《数据结构与算法分析Java语言描述》

    目录 第 3 章 表.栈和队列 3.2 表 ADT 3.2.1 表的简单数组实现 3.2.2 简单链表 3.3 Java Collections API 中的表 3.3.1 Collection 接口 ...

  9. fflush(stdin)和fflush(stdout)

    转自:http://blog.csdn.net/yeyuangen/article/details/6743416 fflush(stdin)即清理标准输入流,把多余的仍未被保存的数据丢掉. fflu ...

  10. 求0到n之间素数个数的序列

    要求: (1) 找出0-1000之间素数(2) 设f(n)表示0-n之间的素数个数,计算出当n=0,1,2,3,.....,997时f(n)的值,并写入文件 分析: 首先找素数使用一个效率较高的方法- ...