<!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. ios之点语法

    第一个object c 程序 首先新建一个项目,“create a new Xcode project"-"OS X下的Application"-"Comman ...

  2. Hadoop on Mac with IntelliJ IDEA - 4 制作jar包

    本文讲述使用IntelliJ IDEA打包Project的过程,即,打jar包. 环境:Mac OS X 10.9.5, IntelliJ IDEA 13.1.4, Hadoop 1.2.1 Hado ...

  3. VHD更新命令（打补丁）

    DISM 查看vhd文件信息:dism /get-imageinfo /imagefile:e:\vhd\win2008r2.vhdxdism /get-imageinfo /imagefile:e: ...

  4. Educational Codeforces Round 1 B. Queries on a String 暴力

    B. Queries on a String Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/59 ...

  5. CircleDisplay

    https://github.com/PhilJay/CircleDisplay

  6. Android与JavaScrip进行交互（二）

    一.思路分析 经过測试发现,JS中的点击事件仅仅能写一个,假设写了多个,也仅仅会响应第一个,假设写的方法是android端的方法,在web端执行时,后台会报没有定义这种方法的错误.前台点击无响应. 所 ...

  7. C加密解密

    /********************************************************* * des.h * 用户使用des算法头文件 * **************** ...

  8. /proc/sysrq-trigger详解

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://itnihao.blog.51cto.com/1741976/830374 htt ...

  9. jquery.validate.js使用id验证控件

    jquery.validate.js默认的是元素的name. 例如:<input name="username" id="username" size=& ...

  10. linux的rpm命令

    rpm 执行安装包二进制包(Binary)以及源代码包(Source)两种.二进制包可以直接安装在计算机中,而源代码包将会由 RPM自动编译.安装.源代码包经常以src.rpm作为后缀名. 常用命令组 ...