演示 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. Android NineGridLayout — 仿微信朋友圈和QQ空间的九宫格图片展示自定义控件

    NineGridLayout 一个仿微信朋友圈和QQ空间的九宫格图片展示自定义控件. GitHub:https://github.com/HMY314/NineGridLayout 一.介绍 1.当只 ...

  2. android hander

    http://www.cnblogs.com/plokmju/p/android_Handler.html 前言 Android的消息传递机制是另外一种形式的“事件处理”,这种机制主要是为了解决And ...

  3. SpringCloud核心教程 | 第三篇：服务注册与发现 Eureka篇

    Spring Cloud简介 Spring Cloud是一个基于Spring Boot实现的云应用开发工具,它为基于JVM的云应用开发中涉及的配置管理.服务发现.断路器.智能路由.微代理.控制总线.全 ...

  4. Android学习笔记之Bitmap位图的缩放

    位图的缩放也可以借助Matrix或者Canvas来实现. 通过postScale(0.5f, 0.3f)方法设置旋转角度,然后用createBitmap方法创建一个经过缩放处理的Bitmap对象,最后 ...

  5. php操作zip压缩文件

    php操作zip压缩文件 一.总结 1.php操作zip:php可以操作zip压缩文件,通过 ZZIPLIB扩展库,这些扩展库可以通过composer安装,或者某些版本的php会自带 2.完美操作zi ...

  6. java list 容器的ConcurrentModificationException

    java中的很多容器在遍历的同时进行修改里面的元素都会ConcurrentModificationException,包括多线程情况和单线程的情况.多线程的情况就用说了,单线程出现这个异常一般是遍历( ...

  7. BZOJ 4555 [Tjoi2016&Heoi2016]求和 （多项式求逆）

    题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=4555 题目大意: 给定 \(S(n,m)\) 表示第二类斯特林数,定义函数 \(f(n ...

  8. ORACLE10g R2【RAC+ASM→单实例FS】

    ORACLE10g R2[RAC+ASM→单实例FS] 10g R2 RAC+ASMà单实例FS的DG,建议禁用OMF. 本演示案例所用环境:   primary standby OS Hostnam ...

  9. elementUI upload 对图片的宽高做校验

    很开心今天中午没有吃饭!原因是一直没有解决掉一个小问题,于是一直试错,最后看了下源码才有了点头绪,历时四五个小时才解决掉,有点怀疑自己的能力了,所以写下此文,记录一下今天的囧况!一般情况下遇到问题,自 ...

  10. 关于Clipboard和GlobalAlloc函数的关系

    一句话:为了满足进程间通信,使用了clipboard的方法,clipboard是系统提供的一段任何进程都可以访问的公共内存块,malloc 和new分配的动态内存块是在进程的私有地址空间分配的,所以必 ...