html代码:

<button id="b1" type="button">淡出</button>
<button id="b2" type="button">淡入</button>
<button id="b3" type="button">淡入淡出</button>
<button id="b4" type="button">透明度</button>
<div id="div1" style="background:red;width:200px;height:200px">qqqqqqqqqqqqq</div>
<div id="div2" style="background:#00FF00;width:200px;height:200px">eeeeeeeeeeeeeee</div>
<div id="div3" style="background:#0000FF;width:200px;height:200px">gggggggggggggggggg</div>

js代码:

 $(function(){
$("#b1").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
$("#b2").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
$("#b3").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
$("#b4").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
});

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 淡入淡出

    演示 jQuery fadeIn() 方法: <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...

  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. Brute-force Algorithm_矩阵快速幂&&欧拉公式*****

    Problem Description Professor Brute is not good at algorithm design. Once he was asked to solve a pa ...

  2. HDU 5025

    http://acm.hdu.edu.cn/showproblem.php?pid=5025 蛇最多只有五条,状态压缩一下,vis增加两维,表示取得钥匙的状态和蛇的状态,然后一个优先队列的bfs即可解 ...

  3. .NET 代码编译过程

    作为一种代码指令平台,Microsoft .NET比微软公司先前推出的其他技术平台要来得更为复杂.由于.NET提供了对多种编程语言以及(在理论上说)多重平台的支持,这就需要在传统的两个代 码层添加一个 ...

  4. magento -- 添加新产品时状态默认为激活,库存状态默认为有库存

    添加新产品时状态默认为激活 打开文件/app/code/core/Mage/Catalog/Model/Product/Status.php,注释掉“Please Select” /** * Retr ...

  5. 将文件从一台linux机器拷贝到多台的方法

    首先你所操作的各台linux机器间必须设置了ssh免密码登录,具体方法可上网查看.将文件从一台linux机器拷贝到多台分为以下几个步骤: 第一步:创建脚本文件remotecopy.sh #!/bin/ ...

  6. HDFS简介【全面讲解】

    http://www.cnblogs.com/chinacloud/archive/2010/12/03/1895369.html [一]HDFS简介HDFS的基本概念1.1.数据块(block)HD ...

  7. vmware上的Linux获取uuid

    在挂载asm硬盘时需要硬盘的UUID 虚拟机配置中需要增加对UUID的支持. 在配置文件vmx文件中增加如下内容 disk.locking="FALSE" disk.EnableU ...

  8. Codeforces Testing Round #8 B. Sheldon and Ice Pieces 水题

    题目链接:http://codeforces.com/problemset/problem/328/B 水题~ #include <cstdio> #include <cstdlib ...

  9. JavaWeb学习记录(十二)——商城购物之数据库操作的接口定义

    一.基本接口,该项目中所有接口都继承它 package blank.dao; import java.util.List; public interface BaseDao<T,PK> { ...

  10. hihoCoder挑战赛23

    hihoCoder挑战赛23 A.Emulator 题意 给一张图,有\(N(N \le 300)\)个点, 给出任意两点之间的最短路. 求最多可以去掉多少条边,使得任意两点的最短路长度不变. 思路 ...