<!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. IT项目管理工具总结(转载)

    以前用过一个cs版的忘记叫啥名了,还用个禅道,感觉一般“5. 测试管理: 项目软件缺陷Bug状态跟踪”在公司内部自己测试或者试用期上线后后期维护阶段用的多,有的公司单独做个系统让用户提问题来修改,也是 ...

  2. 【M8】了解各种不同意义的new和delete

    1.首先考虑new operator,new operator 可以认为做了三件事情:a.调用operator new分配一块内存:b.在这块内存上调用构造方法构造对象:返回指针. 2.operato ...

  3. iOS开发笔记系列-基础6(预处理程序)

    预处理程序提供了一些工具,使用这些工具更易于开发.阅读.修改程序,也易于将程序移植到不同的系统中.又称为宏. #define #define语句的基本用途之一就是给富豪名称指定程序常量.比如: #de ...

  4. Codeforces Round #330 (Div. 2)D. Max and Bike 二分 物理

    D. Max and Bike Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/595/probl ...

  5. C#中判断空字符串的3种方法性能分析

    3种方法分别是:string a="";1.if(a=="")2.if(a==String.Empty)3.if(a.Length==0) 3种方法都是等效的, ...

  6. Android开发 将数据保存到SD卡

    前言: 使用Activity的openFileOutput()方法保存文件,文件是存放在手机空间上,一般手机的存储空间不是很大,存放些小文件还行,如果要存放像视频这样的大文件,是不可行的.对于像视频这 ...

  7. 硬盘安装centos

    1.用pqmagic划分出来二个分区,第一个是ext3格式的,用于放centos镜像文件,第二个不用管是什么格式的,用于安装centos,我一般在磁盘最后面划分出来二个分区. 2.安装Ext2Fsd  ...

  8. LVS 之 DR 2

    http://www.cnblogs.com/kgdxpr/archive/2013/09/09/3309776.html http://lyp0909.blog.51cto.com/508999/5 ...

  9. 数据库字段类型中char和Varchar区别

    char和varchar区别 char类型:对英文(ASCII)字符占用1个字节,对一个汉字占用2个字节,char存储定长数据很方便,char字段上的索引效率级高,比如定义char(10),那么不论你 ...

  10. Asp.Net 之 通过调用 WScript.Shell 启动本地 exe 程序时产生“ automation服务器不能创建对象 ”的错误

    我们经常需要通过生成 ActiveXObject("WScript.Shell"); 来调用某一exe文件. 设置网页打印的页眉页脚为空: var HKEY_Root,HKEY_P ...