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

    <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. Linux基础2

    命令格式命令的类型:1.内部命令 linux系统使用的shell提供.2.外部命令 安装第三方软件才会. type 命令名 查命令的类型 | 把前边命令的输出作为后边命令的输入 管道 grep 对数据 ...

  2. 【bzoj1408】 Noi2002—Robot

    http://www.lydsy.com/JudgeOnline/problem.php?id=1408 (题目链接) 题意 定义了3种数,分别求这3种数的φ的和,其中φ(1)=0. Solution ...

  3. ConvertHelper类

    /// <summary> /// 处理数据类型转换,数制转换.编码转换相关的类 /// </summary> public sealed class ConvertHelpe ...

  4. text-indent无效解决方案

    text-indent是用来字符缩进的. 1.text-indent所在的元素是行内元素而非块级元素.比如用在span,a等行内元素上.解决方案:在行内元素加上display:block; 或者把目标 ...

  5. 洛谷P1460 健康的荷斯坦奶牛 Healthy Holsteins

    题目描述 农民JOHN以拥有世界上最健康的奶牛为傲.他知道每种饲料中所包含的牛所需的最低的维他命量是多少.请你帮助农夫喂养他的牛,以保持它们的健康,使喂给牛的饲料的种数最少. 给出牛所需的最低的维他命 ...

  6. C#制作验证码

    void CodeImage(string code) { if (code == null || code.Trim() == string.Empty) return; System.Drawin ...

  7. git远程分支

    1. 同步远程服务器上的数据到本地 git fetch origin 2. 添加远程分支 git remote add teamone git://git.tram1.ourcompany.com 添 ...

  8. MOOCULUS微积分-2: 数列与级数学习笔记 1. Sequences

    此课程(MOOCULUS-2 "Sequences and Series")由Ohio State University于2014年在Coursera平台讲授. PDF格式教材下载 ...

  9. JAva使用DOM读取XML数据(解析)

    原来一切都是有套路的 使用DOM解析XML文档步骤 1.创建解析器工厂对象 DocumentBuildFactory对象 2.由解析器工厂对象创建解析器对象,即DocumentBuilder对象 3. ...

  10. 屠蛟之路_你的名字_FirstDay

    君の名は. "号外,号外!屠龙天团众志成城,惊天技杀alpha龙!号外,号外--" 苦战十日,屠龙少年们依仗最后的惊天技终于将邪恶的alpha怪龙斩杀.但是对屠龙少年而言,这是一场 ...