动画
高级函数:基于底层函数又进行了封装
两大块:简化版的动画函数和万能动画函数
简化版动画函数
显示/隐藏$().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. 看数据库的文件大小 MySQL Binlog日志的生成和清理规则

    小结: 1.避免并行大大事务对磁盘.内存的消耗: MySQL数据文件导致实例空间满的解决办法_空间/内存_常见问题_云数据库 RDS 版-阿里云 https://help.aliyun.com/kno ...

  2. linux 软/硬链接详解

    SYNOPSIS ln [OPTION]... [-T] TARGET LINK_NAME (1st form) ln [OPTION]... TARGET (2nd form) ln [OPTION ...

  3. Log4j使用注意点

    Porting log4j到指定项目的时候需要注意: 1. log4j选择字符集的时候通过CMake来更改配置,防止出错; 2.

  4. winform创建快捷方式

    /// <summary> /// 创建快捷方式 /// </summary> public class Lnk { /// <summary> /// 创建快捷方 ...

  5. 安装Vue Devtools

    命令行进入vue-devtools\vue-devtools-master执行 cnpm install (貌似npm不太好使,也可能是我网络代理的原因) (淘宝镜像安装 npm install -- ...

  6. 创建目录：mkdir

    [root@localhost ~]# # 创建相对目录 [root@localhost ~]# # 创建绝对目录 [root@localhost ~]# // # -p 用于递归地创建目录

  7. idea-常用插件-nginx

    1.mac上nginx安装 brew search nginx brew install nginx 当然也可以编译安装 安装完以后,可以在终端输出的信息里看到一些配置路径: /usr/local/e ...

  8. css篇-less,scss 用calc问题

    在less或者scss中 calc(100% -4rem) 等带单位混合运算会被less解析忽略单位,全部按照百分比计算,此例中的计算被less编译成calc(96%), 解决办法: width:(& ...

  9. python认知及六大标准数据类型

    --- typora-root-url: assets --- ### -python的认知 ``` 89年开发的语言,创始人范罗苏姆(Guido van Rossum),别称:龟叔(Guido). ...

  10. drf频率组件

    1.简介 控制访问频率的组件 2.使用 手写一个自定义频率组件 import time #频率限制 #自定义频率组件,return True则可以访问,return False则不能访问 class ...