动画
高级函数:基于底层函数又进行了封装
两大块:简化版的动画函数和万能动画函数
简化版动画函数
显示/隐藏$().show;  $(...).hide();
  强调:无参数的show()/hide()使用的是display属性
 瞬间隐藏和显示
 动画参数:speed：
 2种:1.三档: fast normal slow  慢中快 
            2.用毫秒数自定义
动画的速度变化:参数:easing：linear线性变化 swing摇摆属性先加速后减速

伸缩/折叠slideUp向上   slideDown向下  slideTogger()切换

淡入/淡出:fadeIn()淡进   fadeOut()淡出   fadeToggle();

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body>

 <h1>jQuery动画函数-显示隐藏动画</h1>

 <button id="bt1">隐藏DIV</button>

 <!--div#target>p>lorem+Tab键-->

 <div id="target">

     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium autem dicta doloribus eius fugit illum

         ipsum, itaque laborum laudantium modi necessitatibus, nulla, numquam odio qui quisquam sequi temporibus tenetur

         veniam?</p>

 </div>

 <script src="javascript/jquery-1.11.3.js"></script>

 <script>

     //为id为bt1的按钮绑定单击事件:

     $("#bt1").click(function(){

         $("#target").fadeToggle(500);

         //toggle切换隐藏/显示效果

     });

     //让id为target的div隐藏

 </script>

 </body>

 </html>

jQuery-淡入淡出效果-fadeIn()淡进 fadeOut()淡出 fadeToggle();的更多相关文章

  1. 原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)

    淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透 ...

  2. JQuery显示，隐藏和淡入淡出效果

    为了把JQuery搞熟悉,看着菜鸟教程,一个一个例子打,边看边记,算是一晚上的一个小总结吧.加油,我很本但是我很勤奋啊.系统的了解它,就要花时间咯. <!DOCTYPE html> < ...

  3. jQuery学习四——效果

    1.显示,隐藏: <!DOCTYPE html> <html> <head> <title>jquery事件</title> </he ...

  4. Jquery小例子:全选按钮、加事件、挂事件；parent()语法；slideToggle()语法；animate()语法；元素的淡入淡出效果：fadeIn() 、fadeOut()、fadeToggle() 、fadeTo()；function(e):e包括事件源和时间数据;append() 方法

    function(e): 事件包括事件源和事件数据,事件源是指是谁触发的这个事件,谁就是事件源(div,按钮,span都可以是事件源),时间数据是指比如点击鼠标的事件中,事件数据就是指点击鼠标的左建或 ...

  5. jQuery练手：仿新浪微博图片文字列表淡进淡出上下滚动效果

    1.效果及功能说明 仿新浪微博图片文字列表上下淡进淡出间歇上下滚动 2.实现原理 首先要设定div内只能显示4个图片那么多出来的图片会自动隐藏然后在给图片添加一个动画的事件让他们可以滚动的播放出来上下 ...

  6. jQuery 学习02——效果：隐藏/显示、淡入淡出、滑动、动画、停止动画、Callback、链

    jQuery 效果- 隐藏hide()和显示show() 语法: $(selector).hide(speed,callback);$(selector).show(speed,callback); ...

  7. jQuery淡入淡出效果轮播图

    用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: & ...

  8. 基于jquery实现的文字淡入淡出效果

    这篇文章介绍了jquery实现的文字淡入淡出效果实例,有需要的朋友可以参考一下 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  9. jQuery效果-----fadeIn()、fadeOut()、fadeToggle()、fadeTo()

    fadeIn(),fadeOut(),fadeToggle(),fadeTo() fadeIn()-----淡入已经隐藏的元素(把隐藏的被选元素渐渐显示出来). 语法:$(selector).fade ...

随机推荐

  1. C语言保证，0永远不是有效的数据地址，因此，返回址0可用来表示发生的异常事件

    C语言保证,0永远不是有效的数据地址,因此,返回址0可用来表示发生的异常事件

  2. PP图和QQ图 检查2个数据集是否符合同一分布

    1.QQ图检查2个数据集是否符合同一分布,Purpose:Check If Two Data Sets Can Be Fit With the Same Distribution PP图和QQ图 - ...

  3. Flink - watermark生成

    参考,Flink - Generating Timestamps / Watermarks watermark,只有在有window的情况下才用到,所以在window operator前加上assig ...

  4. Fmod使用总结

    1.查询相关文档的地址 http://www.fmod.org/forum/viewtopic.php?f=7&t=15762

  5. flash插件如何生成

    1.通过flash 原生的代码开发插件界面: 2.对于需要使用到的文件,表现mxi 文件, 该文件为adobe extension infomation file, 示例如下 <macromed ...

  6. 上传本地代码到github&&从github下载源码

    最近在玩github,下面简单介绍下githup的使用 将本地代码同步到github. 使用Git GUI同步  1,先下载git,然后安装.右键如图所示. 2,在github里新建一个 reposi ...

  7. Java、mysql、html、css、js 注释&大小写

    java三种注释 原文链接:https://www.cnblogs.com/miys/p/4bf714ce33068dcf9ac6526309c9b5e6.html 单行注释:// 注释内容 多行注释 ...

  8. android实现手势锁

    通过简单的设置后即可实现简单的手势锁: setLineVisible方法设置是否显示手势路径: setLineWidth方法设置手势路径连线的粗细: setLineColor方法设置常规状态手势路径连 ...

  9. 20165336 实验一 Java开发环境的熟悉

    20165336 实验一 Java开发环境的熟悉 一.实验报告封面 课程:Java程序设计 班级:1653班 姓名:康志强 学号:20165336 指导教师:娄嘉鹏 实验日期:2018年4月2日 实验 ...

  10. 重新安装phpstudy之后出现了403的错误

    1. httpd.conf 文件,找到如下代码: DocumentRoot "D:\WWW" <Directory /> Options +Indexes +Follo ...