<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>fadeToggle</title>

<script language="javascript" src="http://files.cnblogs.com/files/caidupingblogs/jquery-1.10.2.min.js">

</script>

<script type="text/javascript">

    $(document).ready(function() {

        $("button").click(function(){

            $("#div1").fadeToggle();

            $("#div2").fadeToggle("slow");

            $("#div3").fadeToggle(3000);

            });

    });

</script>

</head>

<body>

<button>Button</button>

<div id="div1" style="width:80px; height:80px; background-color:#F00""></div>

<div id="div2" style="width:80px; height:80px;background-color:#00F"></div>

<div id="div3" style="width:80px; height:80px;background-color:#0FF"></div>

</boby>

</html>

　　

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>fadeToggle</title>
<script language="javascript" src="http://files.cnblogs.com/files/caidupingblogs/jquery-1.10.2.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});

</script>
</head>

<body>
<button>Button</button>
<div id="div1" style="width:80px; height:80px; background-color:#F00""></div>
<div id="div2" style="width:80px; height:80px;background-color:#00F"></div>
<div id="div3" style="width:80px; height:80px;background-color:#0FF"></div>
</boby>

jQuery之渐变切换的更多相关文章

  1. 七行jquery代码实现图片渐变切换【兼容ie6+、 Chrome、 Firefox】

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 基于jQuery图像碎片切换效果插件FragmentFly

    基于jQuery图像碎片切换效果插件FragmentFly.这是一款只需三步轻松完成碎片动画,参数可调,使用方便. 在线预览   源码下载 部分代码: <div class="all_ ...

  3. 基于jQuery左右滑动切换特效 附源码

    分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效.   效果图如下:   废话不多说,代码奉上!   html代码: <div ...

  4. jquery实现tab切换完整代码

    代码如下,保存到html文件打开: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  5. jquery背景自动切换特效

    查看效果网址:http://keleyi.com/a/bjad/4kwkql05.htm 本特效的jquery版本只支持1.9.0以下. 代码如下: <!DOCTYPE html PUBLIC ...

  6. 基于jQuery打造的选项卡向上弹出jquery焦点图切换特效

    基于jQuery打造的选项卡向上弹出jquery焦点图切换特效 鼠标经过标题栏,会出现层特效向上滑动,并且在同时进行幻灯片切换,效果十分不错. 有兴趣的童鞋可以下载看看,在IE6方面兼容性也不错,只有 ...

  7. 一款基于jQuery轮播切换焦点图,可播放多张图片

    今天给大家分享一款基于jQuery轮播切换焦点图,可播放多张图片,在这个组件中,你可以任意指定8张图片,然后插件就会帮你自动生成缩略图,并且自动开始切换播放图片.当然,你也可以手动切换图片,只要点击缩 ...

  8. 一款基于jQuery多图切换焦点图插件

    这次要给大家分享的也是一款jQuery图片滑块插件,之前有介绍过不少实用的jQuery焦点图插件和jQuery图片滑块插件,比如jQuery左侧Tab切换的图片滑块插件.它的特点是可以同时切换多张图片 ...

  9. 18款 非常实用 jquery幻灯片图片切换

    1.jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换. 查看演示>& ...

随机推荐

  1. [Windows驱动开发]（一）序言

    笔者学习驱动编程是从两本书入门的.它们分别是<寒江独钓——内核安全编程>和<Windows驱动开发技术详解>.两本书分别从不同的角度介绍了驱动程序的制作方法. 在我理解,驱动程 ...

  2. 普通Jquery的ajax判断重复和formvalidator的ajaxValidator区别

    示例:1.ajax版: $("#txtTitle").blur(function () {                 $.ajax({                     ...

  3. CSMA/CD协议——学习笔记

    CSMA/CD协议要点: 1)适配器从网络层获得一个分组,加上以太网的首部和尾部,组成以太网帧,放入适配器的缓存中,准备发送. 2)若适配器检测到信道空闲(即在96比特时间内没有检测到信道上有信号), ...

  4. Oracle数据库的版本变迁功能对比

    Oracle数据库自发布至今,也经历了一个从不稳定到稳定,从功能简单至强大的过程.从第二版开始,Oracle的每一次版本变迁,都具有里程碑意义. 1979年的夏季,RSI(Oracle公司的前身,Re ...

  5. PostgreSQL的 initdb 源代码分析之二十

    继续分析: setup_privileges(); 展开: 这是设置权限. 其cmd是:"/home/pgsql/project/bin/postgres" --single -F ...

  6. Java中throws和throw的区别讲解

    当然,你需要明白异常在Java中式以一个对象来看待.并且所有系统定义的编译和运行异常都可以由系统自动抛出,称为标准异常,但是一般情况下Java 强烈地要求应用程序进行完整的异常处理,给用户友好的提示, ...

  7. hdu 4662 MU Puzzle

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4662 MU Puzzle Time Limit: 2000/1000 MS (Java/Others) ...

  8. C++访问权限

    1.C++类本身没有访问权限的概念,就是class Base. 2.类成员的访问权限有:public.protected.private 3.类的继承方式有:public.protected.priv ...

  9. HDU 4121 Xiangqi 模拟题

    Xiangqi Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=4121 ...

  10. iOS 2D绘图详解（Quartz 2D）之路径(点,直线,虚线,曲线,圆弧,椭圆,矩形)

    前言:一个路径可以包含由一个或者多个shape以及子路径subpath,quartz提供了很多方便的shape可以直接调用.例如:point,line,Arc(圆弧),Curves(曲线),Ellip ...