演示 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. HttpUtility.UrlEncode 方法 (String) 对 URL 字符串进行编码 NET Framework 4.6 and 4.5

    对 URL 字符串进行编码. 这些方法重载可用于对整个 URL(包括查询字符串值)进行编码. 要编码或解码 Web 应用程序之外的值,请使用 WebUtility 类. 重载此成员.有关此成员的完整信 ...

  2. JS怎么判断数组类型？

    1.判断对象的constructor是否指向Array,接着判断特殊的属性length,splice等.[应用的是constructor的定义:返回对象所对应的构造函数.] eg: [].constr ...

  3. Codeforces 718C. Sasha and Array（线段树）

    传送门 解题思路: 这道题给了我们一个崭新的角度来看线段树. 我们常常使用的线段树是维护区间的函数的. 这里呢,提示我们线段树其实还可以维护递推. 美好的矩阵递推性质支持了这一功能. 或者说,对于递推 ...

  4. 【Spring】Service 注入失败，空指针

    service层的类都有用@Service标识,但报空指针,注入失败,很可能是因为spring的application配置和springmvc的配置文件配置错误,导致容器冲突了. spring和spr ...

  5. 怎样将OpenStack部署到Hadoop

    随着信息时代的快速发展,大数据技术和私有云环境都非常实用;只是,假设将两者结合在一起.企业会获得巨大的利润.虽然结合两者会让环境变得更复杂.企业仍然能够看到将 OpenStack 私有云和 Apach ...

  6. ontouch-控件添加ontouch监听事件

    1,代码public class CalculatorViewPager extends ViewPager {}中 package com.android.calculator2; import a ...

  7. JS 数字格式千分位相互转换

    /** * 将数值四舍五入后格式化. * * @param num 数值(Number或者String) * @param cent 要保留的小数位(Number) * @param isThousa ...

  8. Hadoop ecosystem 生态圈

    Cascading: hadoop上面的workflow Sqoop(发音:skup)是一款开源的工具,主要用于在Hadoop(Hive)与传统的数据库(mysql.postgresql...)间进行 ...

  9. 鲁德http://www.testroad.org/topic/76

     [最新的招聘信息]:1.联动优势科技有限公司招聘性能测试工程师       薪资20K左右 http://ask.testroad.org/article/4042.上海-交通银行总行-性能测试专家 ...

  10. java——数组

    数组是多个同样数据类型数组组合,当中数据类型是不论什么数据类型. 数组变量是引用类型变量,数组能够作为对象,数组中的每个元素相当于对象的成员变量,所以数组元素能够默认初始化.(博客java--变量分类 ...