演示 jQuery fadeIn() 方法：

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <script>

 $(document).ready(function(){

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

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

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

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

   });

 });

 </script>

 </head>

 <!-- 点击之后淡入三个不同颜色的div-->

 <body>

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

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

 <br><br>

 <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>

 <div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>

 <div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

 </body>

 </html>

演示 jQuery fadeOut() 方法：

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <script>

 $(document).ready(function(){

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

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

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

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

   });

 });

 </script>

 </head>

 <!-- 点击之后将三个不同颜色的div淡出-->

 <body>

 <p>以下实例演示了 fadeOut() 使用了不同参数的效果。</p>

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

 <br><br>

 <div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>

 <div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>

 <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

 </body>

 </html>

演示fadeToggle() 方法：

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <title></title>

 <script>

 $(document).ready(function(){

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

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

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

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

     });

 });

 </script>

 </head>

 <body>

 <!-- 循环淡入/淡出-->

 <p>实例演示了 fadeToggle() 使用了不同的 speed(速度) 参数。</p>

 <button>点击淡入/淡出</button>

 <br><br>

 <div id="div1" style="width:80px;height:80px;background-color:red;"></div>

 <br>

 <div id="div2" style="width:80px;height:80px;background-color:green;"></div>

 <br>

 <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

 </body>

 </html>

jQuery 淡入淡出的更多相关文章

  1. jQuery淡入淡出轮播图实现

    大家好我是 只是个单纯的小白,这是人生第一次写博客,准备写的内容是Jquery淡入淡出轮播图实现,在此之前学习JS写的轮播图效果都感觉不怎么好,学习了jQuery里的淡入淡出效果后又写了一次轮播图效果 ...

  2. jQuery淡入淡出瀑布流效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

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

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

  4. jquery淡入淡出

    html代码: <button id="b1" type="button">淡出</button> <button id=&quo ...

  5. jQuery淡入淡出效果

    如果是通过鼠标点击事件来触发动画效果可以使用 $("#button").click(function(){ $("#div").stop().fadeToggl ...

  6. jquery淡入淡出轮播图

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. jquery淡入淡出无延迟代码

    <!DOCTYPE html> <html> <head> <script src="jquery.js"></script& ...

  8. jQuery淡入淡出的轮播图

    html结构: <div class="banna">            <ul class="img">              ...

  9. jQuery 淡入淡出有png图的时候 ie8下有黑色边框

    jQuery fadeTo 时ie8 png图片有黑色边框 往带有png图的样式里加 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader ...

随机推荐

  1. eclipse中修改了代码编译后执行不起作用

    在网上试了好多方法都没解决 后来,删了eclipse里的服务器,重新创建了一下,重新运行自己的工程发现修改的代码起作用了.

  2. vue移动端上拉加载更多

    LoadMore.vue <template> <div class="load-more-wrapper" @touchstart="touchSta ...

  3. 趣闻｜Python之禅（The Zen of Python）

    在Python解释器中输入“import this”会发生什么?如果你不知道这个彩蛋,推荐继续阅读这篇文章. 2001年秋,Foretec(一家会议组织公司)正在准备召开第十届Internationa ...

  4. 开发板 Linux驱动视频 驱动是什么

    内存管理单元很重要. linux把设备看成文件,(open,read,write,ioctrl,close)主要写这几个函数. 哈弗结构,取指令和取数据同时进行. arm处理器体系架构以及发展方向 单 ...

  5. [python]类与对象-下

    [实例对象]可以简称为[实例] 一.类与对象的关系 [类]是[对象]的模板. [类]就像工厂的模具,以它为模板,造出来的成千上万的产品,才是被我们消费.购买.使用,真正融入我们生活的东西.这些产品,在 ...

  6. [D3] Debug D3 v4 with Dev Tools

    Since D3 outputs standard markup, you can use familiar dev tools and inspectors to debug your visual ...

  7. STL之vector容器的实现框架

    说明:本文仅供学习交流,转载请标明出处,欢迎转载. 实现vector容器的思路等同于实现一个动态数组,以下我们參照源代码的相关资料,给出一个vector容器的大致框架,仅仅有声明,没给出详细的实现. ...

  8. 通过WMI的方式去设置LCD背光亮度

    code例如以下: #include "stdafx.h" #include <objbase.h> #include <windows.h> #inclu ...

  9. linux中软件安装方式

    通常Linux应用软件的安装包有三种: tar包,如software-1.2.3-1.tar.gz.它是使用UNIX系统的打包工具tar打包的. rpm包,如software-1.2.3-1.i386 ...

  10. 【Codeforces Round #433 (Div. 2) A】Fraction

    [链接]h在这里写链接 [题意] 在这里写题意 [题解] 枚举分子从高到低就好. 这样得到的一定是最大的. (可以约分没错,但是约分过后和就不是n了,所以不会有错的) [错的次数] 0 [反思] 在这 ...