演示 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. socket 笔记（一）

    #include "stdafx.h" #include "WINSOCK2.H" #pragma comment(lib,"WS2_32.lib&q ...

  2. session应用二

    从session中获取mapper对象,利用mapper对象进行增删改查 Date now = new Date(); SqlSession session = this.yangchebaoDbMa ...

  3. 15.lambda表达式

    #include <iostream> #include <array> using namespace std; //解决函数怀孕现象 //[](){} //[] =引用,只 ...

  4. ASP.Net中页面传值的几种方式

    开篇概述 对于任何一个初学者来说,页面之间传值可谓是必经之路,却又是他们的难点.其实,对大部分高手来说,未必不是难点. 回想2016年面试的将近300人中,有实习生,有应届毕业生,有1-3年经验的,有 ...

  5. python 序列排序 排序后返回相应的索引

    https://blog.csdn.net/longwei92/article/details/83098289 https://blog.csdn.net/u013731339/article/de ...

  6. Jszip的使用和打包下载图片

    因为canvas总结到后面又想到了jszip的一些事情,那就索性也回去看看吧.试过,至少谷歌和火狐都是支持jszip的. 1.  jszip的使用 官方文档说的很清楚了,而且也有读取zip文件.生成z ...

  7. 【组件】微信小程序input搜索框的实现

    开发小程序的过程,是一个学习知识,解决问题的过程,每当实现了一个需求,总会有很大的成就感,每天记录一个开发过程中的细节.实现效果如下: 官方参考链接:https://developers.weixin ...

  8. EventWaitHandle

    在查资料的过程中,我突然想到一个类:EventWaitHandle,也就是本文的主角. 这个类通过在线程之间设置信号量,可以非常方便的控制线程运行的顺序.具体代码如下: 首先全局申明: EventWa ...

  9. jvm compile

    >>>Making sec-files-win @ Thu Oct 17 20:34:02 CST 2013 ... >>>Making jgss-files @ ...

  10. Codeforces Round #445 Div. 1 C Maximum Element (dp + 组合数学)

    题目链接: http://codeforces.com/contest/889/problem/C 题意: 给你 \(n\)和 \(k\). 让你找一种全排列长度为\(n\)的 \(p\),满足存在下 ...