废话不多说,先贴代码,再解释

    <script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle();
});
});
</script> <p>演示带有不同参数的 fadeToggle() 方法。</p>
<button>点击这里,使三个矩形淡入淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

要点(Tips):

1、$("button").click({

    });

这是在选取点击事件对应按钮的关键,不能出现错误。

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

这是选取节点,并且调用函数的过程

另外就是你的 html 代码,注意 节点 ID 或者 Class 的设定

今天依然是 JQ点击事件之“点击淡入淡出事件”的更多相关文章

  1. 通过js或jq增加的代码,点击事件或其他一些事件不起作用时

    通过js或jq增加的代码,点击事件或其他一些事件不起作用时,可使用 $(document).on("click",".noshow",function() { ...

  2. 21.JQ的监听事件(点击div外面可以让它消失)

    JQ的监听事件(点击div外面可以让它消失) //监听整个页面 $(document).bind("click", function() { //给需要的对象赋予事件 $(&quo ...

  3. js+jq 淡入淡出轮播(点击+定时+鼠标进入移出事件)

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

  4. jQuery之防止冒泡事件,冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件。

    冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 下面是html代码部分: <body> <div id="content"> 外层div元素 ...

  5. JS怎样将拖拉事件与点击事件分离?

    帖子:http://bbs.csdn.net/topics/390785395?page=1#post-397369340 怎样将拖拉事件跟点击事件分离? 须要做到:拖拉时不触动点击事件 <ht ...

  6. JavaScript的for循环中嵌套一个点击事件为何点击一次弹出多个相同的值

    先看下面一段代码: for(var i=0; i<10; i++) { $('#ul').bind('click', function() { alert(i) }) } 对于这段代码,当点击I ...

  7. js、jq事件绑定方式总结——以click事件为例

    一.JavaScript点击事件绑定方法 1.1 HTML onclick事件属性 <button onclick="clickMe(this)">click me&l ...

  8. 消除点击连接或者按钮或者执行onclick事件时出现的边框

    css中添加 *:not(input) { font-family: sans-serif; font-size-adjust: none; -webkit-user-select: none; -w ...

  9. (网页)HTML5 Canvas ( 事件交互, 点击事件为例 ) isPointInPath(转)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. 源码安装Redis

    1.官网地址下载 猛击 mkdir /down cd down wgit http://download.redis.io/releases/redis-3.0.7.tar.gz ###准备工作:安装 ...

  2. 【BZOJ-1010】玩具装箱toy DP + 斜率优化

    1010: [HNOI2008]玩具装箱toy Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 8432  Solved: 3338[Submit][St ...

  3. java 基础拾漏

    1.java语言支持的类型非为两类:基础类型(primitive Type) 和引用类型(Reference Type),基础类型8种 2.数组元素的类型是基本类型中的整数类型(byte,short, ...

  4. SPOJ GSS1 Can you answer these queries I

    Time Limit: 115MS   Memory Limit: 1572864KB   64bit IO Format: %lld & %llu Description You are g ...

  5. webbench详解

    安装 mkdir -p /usr/local/man/man1 yum install ctags -y tar zxvf webbench-1.5.tar.gzcd webbench-1.5make ...

  6. 帮助理解委托、匿名委托、Lambda表达式还有事件

    写了一个小程序,能够很好的认识到这三个的用法 namespace Lambda { /// <summary> /// 实现根据指定运算形式 输出结果 /// </summary&g ...

  7. SLF4J的好处

    原来我们使用log4j去打印日志,如果我们要更改日志记录器,比如用comms-Logging,那我们在代码里面还要改每个类的引用包,但是如果用slf4j的话只要在配置的时候改下,代码完全用slf4j的 ...

  8. CMD命令之 :修改windows的CMD窗口输出编码格式为UTF-8

    修改windows的CMD窗口输出编码格式为UTF-8 转载自 http://xuliduo.iteye.com/blog/639923 dos命令: chcp 65001  就是换成UTF-8代码页 ...

  9. MySQL的mysqldump工具的基本用法

    导出要用到MySQL的mysqldump工具,基本用法是:    shell> mysqldump [OPTIONS] database [tables]    如果你不给定任何表,整个数据库将 ...

  10. Oracle数据库的备份方法

    1.引言 Oracle数据库的备份方法很多,无论使用那种备份方法,备份的目的都是为了在出现故障后能够以尽可能小的时间和代价恢复系统.比如使用export实用程序导出数据库对象.使用Oracle备份数据 ...