1. 淡入动画

1.1 不带参数的淡入动画

格式：

$(selector).fadeIn();

示例代码：

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>fadeIn() Demo</title>
  6.     <style type="text/css">
  7.         div{
  8.             width: 300px;
  9.             height: 300px;
  10.             display: none;
  11.             background-color: #ff6700;
  12.         }
  13.     </style>
  14.     <script type="text/javascript" src="jquery.js"></script>
  15.     <script>
  16.         $(function () {
  17.             $("button").click(function () {
  18.                 $("div").fadeIn();
  19.             });
  20.         })
  21.     </script>
  22. </head>
  23. <body>
  24.     <button>淡入</button>
  25.     <div></div>
  26. </body>
  27. </html>

1.2  带数值参数的淡入动画

格式：

$(selector).fadeIn(Number);

参数： Number为毫秒值， 1s = 1000ms

代码示例：

  1.  <!doctype html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>fadeIn() Demo</title>
  6.      <style type="text/css">
  7.          div{
  8.              width: 300px;
  9.              height: 300px;
  10.              display: none;
  11.              background-color: #ff6700;
  12.          }
  13.      </style>
  14.      <script type="text/javascript" src="jquery.js"></script>
  15.      <script>
  16.          $(function () {
  17.              $("button").click(function () {
  18.                  $("div").fadeIn(2000);
  19.              });
  20.          })
  21.      </script>
  22.  </head>
  23.  <body>
  24.      <button>淡入</button>
  25.      <div></div>
  26.  </body>
  27.  </html>

1.3 带String参数的淡入动画

格式：

$(selector).fadeIn(String);

参数(String): 参数有三个值可选， 分别是slow(600ms)， normal(400ms)， fast(200ms)。

示例代码：

  1.  <!doctype html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>fadeIn() Demo</title>
  6.      <style type="text/css">
  7.          div{
  8.              width: 300px;
  9.              height: 300px;
  10.              display: none;
  11.              background-color: #ff6700;
  12.          }
  13.      </style>
  14.      <script type="text/javascript" src="jquery.js"></script>
  15.      <script>
  16.          $(function () {
  17.              $("button").click(function () {
  18.                  //以slow speed fadein
  19.                  $("div").fadeIn("slow");
  20.                  //以normal speed fadein
  21.                  $("div").fadeIn("normal");
  22.                  //以fast speed fadein
  23.                  $("div").fadeIn("fast");
  24.              });
  25.          })
  26.      </script>
  27.  </head>
  28.  <body>
  29.      <button>淡入</button>
  30.      <div></div>
  31.  </body>
  32.  </html>

1.4. 带callback的淡入动画

格式：

$(selector).fadeIn(speed, callback);

示例代码：

  1.  <!doctype html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>fadeIn() Demo</title>
  6.      <style type="text/css">
  7.          div{
  8.              width: 300px;
  9.              height: 300px;
  10.              display: none;
  11.              background-color: #ff6700;
  12.          }
  13.      </style>
  14.      <script type="text/javascript" src="jquery.js"></script>
  15.      <script>
  16.          $(function () {
  17.              $("button").click(function () {
  18.                  $("div").fadeIn(2000, function () {
  19.                      alert("fadeIn执行完毕！");
  20.                  });
  21.              });
  22.          })
  23.      </script>
  24.  </head>
  25.  <body>
  26.      <button>淡入</button>
  27.      <div></div>
  28.  </body>
  29.  </html>

2. fadeOut()

格式：

$(selector).fadeOut(speed, callback);

返回值： jQuery

作用： 通过淡出的方式隐藏匹配元素

参数(speed)：控制隐藏匹配参数的速度， 此参数有三种情况。

　　　　　　（1）省略不写。 当speed省略不写时， 默认使用400ms的速度淡出。

　　　　　　（2）以number作为参数。 此参数为毫秒数， 1000ms = 1s。

　　　　　　（3）以String作为参数。 有3种值可选， 分别是slow(600ms), normal(400ms), fast(200ms)。

参数(callback)： 在执行完淡出操作后， 执行的函数。

示例代码：

  1.  <!doctype html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>fadeOut() Demo</title>
  6.      <style type="text/css">
  7.          div{
  8.              width: 300px;
  9.              height: 300px;
  10.              display: block;
  11.              background-color: #ff6700;
  12.          }
  13.      </style>
  14.      <script type="text/javascript" src="jquery.js"></script>
  15.      <script>
  16.          $(function () {
  17.              $("button").click(function () {
  18.                  $("div").fadeOut();
  19.              });
  20.          })
  21.      </script>
  22.  </head>
  23.  <body>
  24.      <button>淡出</button>
  25.      <div></div>
  26.  </body>
  27.  </html>

fadeOut() 示例代码

  1.  <!doctype html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>fadeOut(Number) Demo</title>
  6.      <style type="text/css">
  7.          div{
  8.              width: 300px;
  9.              height: 300px;
  10.              display: block;
  11.              background-color: #ff6700;
  12.          }
  13.      </style>
  14.      <script type="text/javascript" src="jquery.js"></script>
  15.      <script>
  16.          $(function () {
  17.              $("button").click(function () {
  18.                  $("div").fadeOut(1000);
  19.              });
  20.          })
  21.      </script>
  22.  </head>
  23.  <body>
  24.      <button>淡出</button>
  25.      <div></div>
  26.  </body>
  27.  </html>

fadeOut(Number)示例代码

  1.  <!doctype html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>fadeOut(Number) Demo</title>
  6.      <style type="text/css">
  7.          div{
  8.              width: 300px;
  9.              height: 300px;
  10.              display: block;
  11.              background-color: #ff6700;
  12.          }
  13.      </style>
  14.      <script type="text/javascript" src="jquery.js"></script>
  15.      <script>
  16.          $(function () {
  17.              $("button").click(function () {
  18.                  $("div").fadeOut(1000);
  19.              });
  20.          })
  21.      </script>
  22.  </head>
  23.  <body>
  24.      <button>淡出</button>
  25.      <div></div>
  26.  </body>
  27.  </html>

fadeOut(String)示例代码

  1.  <!doctype html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>fadeOut(Number) Demo</title>
  6.      <style type="text/css">
  7.          div{
  8.              width: 300px;
  9.              height: 300px;
  10.              display: block;
  11.              background-color: #ff6700;
  12.          }
  13.      </style>
  14.      <script type="text/javascript" src="jquery.js"></script>
  15.      <script>
  16.          $(function () {
  17.              $("button").click(function () {
  18.                  $("div").fadeOut(1000, function () {
  19.                      alert("fadeOut动画执行完毕！")
  20.                  });
  21.              });
  22.          })
  23.      </script>
  24.  </head>
  25.  <body>
  26.      <button>淡出</button>
  27.      <div></div>
  28.  </body>
  29.  </html>

fadeOut(speed, callback)示例代码

3. fadeToggle()

格式：

$(selector).fadeToggle(speed, callback);

返回值： jQuery

作用： 在淡入动画和淡出动画之间进行切换。 当元素隐藏时， 以淡入形式显示元素。 当元素显示时， 以淡出形式隐藏动画。

参数(speed)：控制隐藏匹配参数的速度， 此参数有三种情况。

　　　　　　（1）省略不写。 当speed省略不写时， 默认使用400ms的速度改变透明度。

　　　　　　（2）以number作为参数。 此参数为毫秒数， 1000ms = 1s。

　　　　　　（3）以String作为参数。 有3种值可选， 分别是slow(600ms), normal(400ms), fast(200ms)。

参数(callback)： 在执行完淡出操作后， 执行的函数。

  1.  <!doctype html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>fadeToggle() Demo</title>
  6.      <style type="text/css">
  7.          div{
  8.              width: 300px;
  9.              height: 300px;
  10.              display: block;
  11.              background-color: red;
  12.          }
  13.      </style>
  14.      <script type="text/javascript" src="jquery.js"></script>
  15.      <script type="text/javascript">
  16.          $(function () {
  17.              $("button").click(function () {
  18.                  $("div").fadeToggle(2000, function () {
  19.                      alert("动画执行完毕！");
  20.                  });
  21.              });
  22.          })
  23.      </script>
  24.  </head>
  25.  <body>
  26.      <button>切换</button>
  27.      <div></div>
  28.  </body>
  29.  </html>

fadeToggle() 示例代码

4. fadeTo()

$(selector).fadeTo(speed, opacity, callback);

返回值： jQuery

作用： 将被选元素的不透明度逐渐更改为指定的值

参数(speed)：可选， 控制隐藏匹配参数的速度， 此参数有三种情况。

　　　　　　（1）省略不写。 当speed省略不写时， 默认使用400ms的速度淡出。

　　　　　　（2）以number作为参数。 此参数为毫秒数， 1000ms = 1s。

　　　　　　（3）以String作为参数。 有3种值可选， 分别是slow(600ms), normal(400ms), fast(200ms)。

参数(opacity): 必选， 规定淡入或者淡出的透明度。必须是介于0.00~1.00之间的数字。

参数(callback)： 可选， fadeTo函数执行完之后，要执行的函数。

　　　　　　　如果没有设置speed， 那么就不能设置callback。

  1.  <!doctype html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>fadeTo Demo</title>
  6.      <style type="text/css">
  7.          div{
  8.              width: 300px;
  9.              height: 300px;
  10.              opacity: 1.0;
  11.              background-color: #ff6700;
  12.          }
  13.      </style>
  14.      <script type="text/javascript" src="jquery.js"></script>
  15.      <script type="text/javascript">
  16.          $(function () {
  17.              $("button").click(function () {
  18.                  $("div").fadeTo(1000, 0.5, function () {
  19.                      alert("fadeTo 执行完毕！");
  20.                      })
  21.              });
  22.          })
  23.      </script>
  24.  </head>
  25.  <body>
  26.      <button>透明度</button>
  27.      <div></div>
  28.  </body>
  29.  </html>

fadeTo() 示例代码

5.  淡入淡出示例代码

  1.  <!doctype html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>fadeIn() fadeOut() fadeToggle() Demo</title>
  6.      <style type="text/css">
  7.          div{
  8.              width: 300px;
  9.              height: 300px;
  10.              display: none;
  11.              opacity: 1;
  12.              background-color: red;
  13.          }
  14.      </style>
  15.      <script type="text/javascript" src="jquery.js"></script>
  16.      <script type="text/javascript">
  17.          $(function () {
  18.              $("button:eq(0)").click(function () {
  19.                 $("div").fadeIn(2000, function () {
  20.                     alert("fadeIn 执行完毕！");
  21.                 })
  22.              });
  23.  
  24.              $("button:eq(1)").click(function () {
  25.                  $("div").fadeOut(2000, function () {
  26.                      alert("fadeOut执行完毕");
  27.                  })
  28.              });
  29.  
  30.              $("button:eq(2)").click(function () {
  31.                  $("div").fadeToggle(2000, function () {
  32.                      alert("fadeToggle执行完毕")
  33.                  })
  34.              });
  35.  
  36.              $("button:eq(3)").click(function () {
  37.                  $("div").fadeTo(1000, 0.5, function () {
  38.                      alert("透明度执行完毕！")
  39.                  });
  40.              });
  41.          })
  42.      </script>
  43.  </head>
  44.  <body>
  45.      <button>淡入</button>
  46.      <button>淡出</button>
  47.      <button>切换</button>
  48.      <button>透明度</button>
  49.      <div></div>
  50.  </body>
  51.  </html>

淡入淡出动画 示例代码

JQuery动画之淡入淡出动画的更多相关文章

  1. 使用 jQuery 中的淡入淡出动画，实现图片的轮播效果，每隔 2 秒钟切换一张图片，共 6 张图片

    查看本章节 查看作业目录 需求说明: 使用 jQuery 中的淡入淡出动画,实现图片的轮播效果,每隔 2 秒钟切换一张图片,共 6 张图片,切换到第 6 张后从头开始切换,在图片的下方显示 6 个小圆 ...

  2. JQuery--基础动画、滑动动画、淡入淡出动画、自定义动画

    /** * [JQ基础动画] * show() 显示 * hide() 隐藏 * toggle() 切换 * 默认无动画,如果要产生动画 * 在括号内,添加毫秒数,可产生动画和控制动画的快慢 * * ...

  3. jQuery-4.动画篇---淡入淡出效果

    jQuery中淡出动画fadeOut 让元素在页面不可见,常用的办法就是通过设置样式的display:none.除此之外还可以一些类似的办法可以达到这个目的.这里要提一个透明度的方法,设置元素透明度为 ...

  4. Android动画之淡入淡出

    为了更好的说明Android动画的淡入淡出效果,这里以一个场景为例: 界面上有两个View 控件,两个View交替显示,当一个View淡入显示,另一个View淡出不可见. 我们把当前要显示的View叫 ...

  5. [Android]异步加载图片，内存缓存，文件缓存，imageview显示图片时增加淡入淡出动画

    以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/3574131.html  这个可以实现ImageView异步加载 ...

  6. jQuery实现一个淡入淡出下拉菜单 非常简易

    前段时间我一直在向大家推荐CSS3和HTML5的东西,尽管看上去很炫,但也有不少网友抱怨兼容性问题,所以今天开始我也会陆续向大家介绍一些兼容性较好的jQuery插件.今天先分享一款利用jQuery实现 ...

  7. jquery鼠标键盘悬停事件，形变动画和淡入淡出

    鼠标和键盘悬停 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  8. Android 四种简单的动画（淡入淡出、旋转、移动、缩放效果）

    最近在Android开发当中,用到的动画效果. public void onClick(View arg0) { // TODO 自动生成的方法存根 switch (arg0.getId()) { c ...

  9. 利用CSS3制作淡入淡出动画效果

    CSS3新增动画属性“@-webkit-keyframes”,从字面就可以看出其含义——关键帧,这与Flash中的含义一致. 利用CSS3制作动画效果其原理与Flash一样,我们需要定义关键帧处的状态 ...

随机推荐

  1. asp.net 6.aspx页面

    1.aspx页面的头部 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Us ...

  2. JS基础_for循环

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. JS基础_if练习三

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  4. O041、Resize Instance 操作详解

    参考https://www.cnblogs.com/CloudMan6/p/5548294.html   Resize 的作用是调整instance的vCPU.内存和磁盘资源.   Instance  ...

  5. <%%> <%! %> <%=%> <%-- --%> jsp中jstl一些运用

    <%%> 这里面可以添加java代码片段<%! %> 这里添加java方法 主要是用来声明变量的 <%=%> 将变量或表达式值输出到页面<%-- --%> ...

  6. Photoshop从入门到精通所有视频教程（43G）以及素材资料免费拿

    包含了Photoshop从入门到精通所有需要了解的视频教程资料,并且包含了大量的P图素材. 资料获取方式,关注公总号RaoRao1994,查看往期精彩-所有文章,即可获取资源下载链接 更多资源获取,请 ...

  7. C#字符串和16进制字符串之间的转换

    将字符串编码成 16进制 字符串表示: using System;using System.Collections.Generic;using System.Linq;using System.Tex ...

  8. SpringBoot-自动配置

    一.自动配置的核心 一般springboot程序,我们都会在主启动类上加上@SpringBootApplication注解,@SpringBootApplication是一个复合注解,上面标注了@Co ...

  9. springboot搭建web项目与使用配置文件

    目录 一.准备工作 二.创建基础web项目 1. maven配置 2.创建maven项目.配置pom.xml为web基础项目 3.编写启动类 4.使用maven打包 5.使用命令java -jar x ...

  10. ORALCE 数据库字符串处理、常用函数

    .字符串转日期: to_date(paramStr,'YYYYMMDDHH24MISS') to_date(paramStr,'yyyy-MM-DD') to_date(paramStr,'yyyy/ ...