演示 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. 提高IIS的FTP安全性 管理员的九阴真经

    提高IIS的FTP安全性 管理员的九阴真经 <九阴真经>是很多武林高手蒙昧以求的武林秘籍,在系统管理员这个武林中也有很多类似<九阴真经>一样的秘籍.在这里就向大家介绍一下有关提 ...

  2. JavaScript--数据结构与算法之列表

    3.1 列表的抽象数据类型定义 列表:一组有序的数据.每个列表中的数据称为元素.在JavaScript中列表的元素可以是任意的数据类型.列表中保存的元素没有事先的限定,实际使用时的元素数量受到程序内存 ...

  3. 洛谷P3613 睡觉困难综合征（LCT）

    题目: P3613 睡觉困难综合症 解题思路: LCT,主要是维护链上的多位贪心答案,推个公式:分类讨论入0/1的情况,合并就好了(公式是合并用的) 代码(我不知道之前那个为啥一直wa,改成结构体就好 ...

  4. 设计模式之十二：状态模式(State)

    状态模式: 当一个对象的内部状态发生变化时同意改变它的行为. Allow an object to alter its behavior when its internal state changes ...

  5. 如何让Apache不显示服务器信息

    如何让Apache不显示服务器信息 Apache的默认配置是会显示服务器信息的,比如访问一个服务器上不存在的页面,Apache会返回"Not Found"的错误,这个错误页面的最下 ...

  6. 在同一个局域网下实时访问vue项目，移动端也可以。

    之前,UI看做好的页面效果,一直都是把项目打包好后放上服务器跑. 现在,UI能实时看到我的项目的页面效果情况了. 那么问题来了!!! 要怎样做到呢??? 接下来照做就行了!!! 请您先打开项目下的pa ...

  7. 注意knn与kmeans的区别

    开始的时候,我居然弄混了. knn是分类方法,是通过新加入的节点最接近的N个节点的属性,来判定新的节点. kmeans是聚类方法,是先选择k个点作为k个簇的中点,然后分簇之后重新划定中心点,然后再分簇 ...

  8. oracle 多行转多列查询

     oracle 多行转多列查询  ---create table Fruit(id int,name varchar(20), Q1 int, Q2 int, Q3 int, Q4 int);inse ...

  9. POJ 1466 Girls and Boys (ZOJ 1137 )最大独立点集

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=137 http://poj.org/problem?id=1466 题目大意: ...

  10. P2P借款的几种情况

    借款,至少出现2种人,借款人和出借人.根据人的性质,企业和个人,分成4种情况. 企业-个人,企业-企业,个人-企业,个人-个人. P2P平台可能出现几种情况: 个人-个人 2种情况:   a. 借款人 ...