在jQuery中的一些特效中，可以通过四个方法来实现元素的淡入淡出，这四个方法分别是：fadeIn()、fadeOut()、fadeToggle() 以及 fadeTo()，下面为分别为大家介绍各个方式的使用。

　　jQuery fadeIn() 用于淡入已经被隐藏的元素，例子：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>jquery淡入</title>

     <style>

         *{margin:0;padding:0;}

          div{width:50px;height:50px;margin:10px;display:none;}

          #div1{background: green;}

          #div2{background: orange;}

          #div3{background: yellow;}

     </style>

     <!-- jquery自己引入就好，我这里的是jquery-1.12.0.min.js -->

     <script type="text/javascript" src="jquery-1.12.0.min.js"></script>

       <script type="text/javascript">

            $(document).ready(function(){

            $("button").click(function(){

                     $("#div1").fadeIn();

                      $("#div2").fadeIn(1000);

                       $("#div3").fadeIn("slow");

            });

            });

       </script>

 </head>

 <body>

      <p>实例演示了 fadeIn()不同参数的效果。</p>

      <button>点击淡入 div 元素。</button>

      <div id="div1"></div>

      <div id="div2"></div>

      <div id="div3"></div>

 </body>

 </html>

　　jQuery fadeOut() 用于淡入已经被隐藏的元素，例子：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>jquery淡出</title>

     <style>

         *{margin:0;padding:0;}

          div{width:50px;height:50px;margin:10px;}

          #div1{background: green;}

          #div2{background: orange;}

          #div3{background: yellow;}

     </style>

     <!-- jquery自己引入就好，我这里的是jquery-1.12.0.min.js -->

     <script type="text/javascript" src="jquery-1.12.0.min.js"></script>

       <script type="text/javascript">

            $(document).ready(function(){

            $("button").click(function(){

                     $("#div1").fadeOut();

                      $("#div2").fadeOut(1000);

                       $("#div3").fadeOut("slow");

            });

            });

       </script>

 </head>

 <body>

      <p>实例演示了 fadeIn()不同参数的效果。</p>

      <button>点击淡出 div 元素。</button>

      <div id="div1"></div>

      <div id="div2"></div>

      <div id="div3"></div>

 </body>

 </html>

　　jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

　　如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。

　　如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>fadeToggle()切换</title>

     <style>

         *{margin:0;padding:0;}

          div{width:50px;height:50px;margin:10px;}

          #div1{background: green;}

          #div2{background: orange;}

          #div3{background: yellow;}

     </style>

     <!-- jquery自己引入就好，我这里的是jquery-1.12.0.min.js -->

     <script type="text/javascript" src="jquery-1.12.0.min.js"></script>

       <script type="text/javascript">

            $(document).ready(function(){

            $("button").click(function(){

                     $("#div1").fadeToggle();

                      $("#div2").fadeToggle(1000);

                       $("#div3").fadeToggle("slow");

            });

            });

       </script>

 </head>

 <body>

      <p>实例演示了 fadeToggle() 不同参数的效果。</p>

      <button>点击切换 div 元素。</button>

      <div id="div1"></div>

      <div id="div2"></div>

      <div id="div3"></div>

 </body>

 </html>

　　jQuery fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>fadeTo透明度</title>

     <style>

         *{margin:0;padding:0;}

          div{width:50px;height:50px;margin:10px;}

          #div1{background: green;}

          #div2{background: orange;}

          #div3{background: yellow;}

     </style>

     <!-- jquery自己引入就好，我这里的是jquery-1.12.0.min.js -->

     <script type="text/javascript" src="jquery-1.12.0.min.js"></script>

       <script type="text/javascript">

            $(document).ready(function(){

            $("button").click(function(){

                     $("#div1").fadeTo("slow",0.15);

                  $("#div2").fadeTo("slow",0.4);

                   $("#div3").fadeTo("slow",0.7);

            });

            });

       </script>

 </head>

 <body>

      <p>实例演示了 fadeTo不同参数的效果。</p>

      <button>点击fadeTo透明度 div 元素。</button>

      <div id="div1"></div>

      <div id="div2"></div>

      <div id="div3"></div>

 </body>

 </html>

jQuery的淡入和淡出简单介绍的更多相关文章

  1. jQuery效果--淡入和淡出

    jQuery Fading 方法 通过 jQuery,您可以实现元素的淡入淡出效果. jQuery 拥有下面四种 fade 方法: fadeIn() fadeOut() fadeToggle() fa ...

  2. 关于JQuery简单介绍

    jQuery是一个兼容多浏览器的javascript库,核心理念是写得更少,做得更多.如今,jQuery已经成为最流行的javascript库,在世界前10000个访问最多的网站中,有超过55%在使用 ...

  3. 利用jQuery的淡入淡出实现轮播器

    基本原理:将所有图片绝对定位在同一位置,透明度设为0,然后通过jQuery的淡入淡出实现图片的切换效果: 但我在使用fadeIn淡入时却无效果,最后只能使用fadeTo实现,求大神指教 HTML: & ...

  4. jQuery 效果 - 淡入淡出

    通过 jQuery,您可以实现元素的淡入淡出效果. 点击展示 淡入/淡出 面板 实例 jQuery fadeIn()演示 jQuery fadeIn() 方法. jQuery fadeOut()演示 ...

  5. jQuery系列 第一章 jQuery框架简单介绍

    第一章 jQuery框架简单介绍 1.1 jQuery简介 jQuery是一款优秀的javaScript库(框架),该框架凭借简洁的语法和跨平台的兼容性,极大的简化了开发人员对HTML文档,DOM,事 ...

  6. jQuery 效果 – 淡入淡出

    在在jQuery中可以通过四个方法来实现元素的淡入淡出,这四个方法分别是:fadeIn().fadeOut().fadeToggle() 以及 fadeTo(),本文通过实例来为你讲解如何在jQuer ...

  7. jQuery实现淡入淡出二级下拉导航菜单的方法

    本文实例讲述了jQuery实现淡入淡出二级下拉导航菜单的方法.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的导航菜单,淡入淡出二级的菜单导航,很经常见到的效果,这里使用的是jquer ...

  8. jQuery学习----简单介绍，基本使用，操作样式，动画

    jQuery简单介绍 jq是js的插件库,说白了,jq就是一个js文件 凡事能用jq实现的,js都能实现.但是js能实现的,jq不一定能够实现 jq的引入 http://www.bootcdn.cn ...

  9. jQuery 简单介绍

    jQuery  简单介绍 jQuery的定义 jQuery是一个快速,小巧,功能丰富的JavaScript库.它通过易于使用的API在大量浏览器中运行,使得   HTML文档遍历和操作,事件处理,动画 ...

随机推荐

  1. Docs-.NET-C#-指南-语言参考-预处理器指令：#pragma（C# 参考）

    ylbtech-Docs-.NET-C#-指南-语言参考-预处理器指令:#pragma(C# 参考) 1.返回顶部 1. #pragma(C# 参考) 2015/07/20 #pragma 为编译器给 ...

  2. ES6深入浅出-4 迭代器与生成器-5.科班 V.S. 培训

    为什么要学用不到的东西 科班是把你未来一二十年用的东西都给你入个门 做前端 三年后一定要再学一门语言. 买一本图解算法 培训讲究的是技能,只能满足3到5年,而不是术,学术学的是你未来10年甚至20年用 ...

  3. [ jenkins ] git+jenkins+maven + ansible 部署java程序

    1. 工具介绍 git:版本控制,一般都是托管到代码仓库的.如 github.coding.gitlab (本文以 coding 为例) jenkins:持续集成工具之一,也是最常用的工具,主要工作就 ...

  4. linux 下修改时间

    修改linux的时间可以使用date指令 date命令的功能是显示和设置系统日期和时间. 输入date 查看目前系统时间. 修改时间需要 date -功能字符 修改内容 命令中各选项的含义分别为: - ...

  5. 记录一下vue slot

    使用步骤: 1.在组件(panda)当中建立一个slot,定义好name.(<slot name='myname'></slot>)    2.引用组件的时候如果需要补充内容, ...

  6. java多线程实现多客户端socket通信

    一.服务端 package com.czhappy.hello.socket; import java.io.IOException; import java.net.InetAddress; imp ...

  7. mysql子查询用法

    mysql子查询用法 1 可以当值来用<pre>select id from hcyuyin_share where id=(select id from hcyuyin_share li ...

  8. JVM(三) 对象的创建过程

    1.对象的创建过程 1.1 . 给对象分配内存 对象的内存分配有两种方式,一种是指针碰撞另外一种是空闲列表的方式,堆是否规整由我们垃圾回收器来决定的 ,如果垃圾回收带有我们的压缩算法,那么他会规整的分 ...

  9. 使用qt creator来编译 调试 用CMakeLists组织的工程

                                                   爱情原如树叶一样,在人忽视里绿了,在忍耐里露出蓓蕾. -- 何其芳 使用CMake作为构建系统,需要自己写 ...

  10. php密码正则匹配

    <?php /** * @param $pwd * @return string */ function isPwd($pwd){ $pattern= '/^[0-9a-z_$]{6,16}$/ ...