<!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. C#全角半角转换函数

    Code#region 全角半角转换 /// <summary> /// 转全角的函数(SBC case) /// </summary> /// <param name= ...

  2. IE 、Firefox、Chrome 浏览器在 F12 控制台下切换至不同框架介绍

    有不少网页的页面,还在使用 iframe 标签,而此时,相当于页面有两个 window 对象,一个为当前页面 window ,另一个则为 iframe 页面下的 window .因为,有时候需要在 c ...

  3. php-fpm 启动和关闭

    php-fpm -c /data/tools/repository/php-5.3.10/etc/php.ini -y /data/tools/repository/php-5.3.10/etc/ph ...

  4. hdu 4494 Teamwork 最小费用最大流

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

  5. Ununtu 12.04 gedit安装插件Source Code Browser

    1. 安装ctags: sudo apt-get install exuberant-ctags 2. 打开https://github.com/Quixotix/gedit-source-code- ...

  6. android 访问SMS短信收件箱

    访问 SMS收件箱是另一个常见的需求.首先,需要将读取 SMS 的权限   <uses-permission android:name="android.permission.READ ...

  7. 获取设备上全部系统app信息

    在获取android设备的全部程序信息一文中介绍了获取手机上全部app信息的方法,以下介绍过滤掉系统app的方法: MainActivity: package com.home.getsysapp; ...

  8. java_类承继其他类的内部类例子

    package ming; class Outer { class In { public In(String msg) { System.out.println(msg); } } } public ...

  9. LXNetwork – 基于AF3.0封装的iOS网络请求库

    本框架实现思路与YTKNetwork和RTNetworking类似,相当于一个简单版,把每一个网络请求封装成对象.使用LXNetwork,你的每一个请求都需要继承LXBaseRequest类,通过覆盖 ...

  10. oracle数据库元数据SQL查询

    oracle数据库经典SQL查询 .查看表空间的名称及大小 select t.tablespace_name, round(sum(bytes/(1024*1024)),0) ts_size from ...