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

    <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. 当findById(Integer id)变成String类型

    1.原Action // 添加跳转 @RequiresPermissions("pdaManager:v_add") @RequestMapping("/pdaManag ...

  2. raspberry pi的网络配置

    这个像是interface的man. http://fts.ifac.cnr.it/cgi-bin/dwww?type=runman&location=interfaces/5 然后是一篇博文 ...

  3. Scala高阶函数示例

    object Closure { def function1(n: Int): Int = { val multiplier = (i: Int, m: Int) => i * m multip ...

  4. Algorithmic Graph Drawing in TikZ

    最近在写模板时需要画个图 ("图论"的"图"). 本来打算用Windows画图 (mspaint) 的, 但是效果不好, 还是决定用LaTeX的TikZ画. 这 ...

  5. 第一章、欢迎进入C#编程世界

    1.GUI:图形用户界面. 2.在C#中,所有可执行代码都必须在方法中定义,而方法必须从属于类或结构. 3.程序集中可能包含多个命名空间的类,而一个命名空间可能跨越多个程序集. 4.解决方案文件使用. ...

  6. JavaWeb学习总结-05 Servlet 学习和使用(01)

    一 Servlet的原理 1 Servlet 的创建 当Servlet容器启动web应用时,需要立即加载Servlet时: Servlet容器启动web应用时,将按照指定的顺序初始化Servlet,需 ...

  7. linux认识第一面

    一.领域问题: 在客户端领域,windows始终占据了优势地位.而在服务器领域,全球98%的都是在用linux.因为linux作为服务器的载体,便宜又安全. 二.linux是基于内核的编写工具,在li ...

  8. jQuery小技巧

    1. 禁止右键点击 $(document).bind("contextmenu",function(e){ return false; }); 2.隐藏搜索文本框文字 $(docu ...

  9. js初学—js全自定义单选框

    代码如下: <script type="text/javascript"> window.onload=function() { var oIput=document. ...

  10. Java 命令行运行参数大全

    Java在运行已编译完成的类时,是通过java虚拟机来装载和执行的,java虚拟机通过操作系统命令JAVA_HOME"bin"java –option 来启动,-option为虚拟 ...