今天依然是 JQ点击事件之“点击淡入淡出事件”
废话不多说,先贴代码,再解释
<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点击事件之“点击淡入淡出事件”的更多相关文章
- 通过js或jq增加的代码,点击事件或其他一些事件不起作用时
通过js或jq增加的代码,点击事件或其他一些事件不起作用时,可使用 $(document).on("click",".noshow",function() { ...
- 21.JQ的监听事件(点击div外面可以让它消失)
JQ的监听事件(点击div外面可以让它消失) //监听整个页面 $(document).bind("click", function() { //给需要的对象赋予事件 $(&quo ...
- js+jq 淡入淡出轮播(点击+定时+鼠标进入移出事件)
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...
- jQuery之防止冒泡事件,冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件。
冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 下面是html代码部分: <body> <div id="content"> 外层div元素 ...
- JS怎样将拖拉事件与点击事件分离?
帖子:http://bbs.csdn.net/topics/390785395?page=1#post-397369340 怎样将拖拉事件跟点击事件分离? 须要做到:拖拉时不触动点击事件 <ht ...
- JavaScript的for循环中嵌套一个点击事件为何点击一次弹出多个相同的值
先看下面一段代码: for(var i=0; i<10; i++) { $('#ul').bind('click', function() { alert(i) }) } 对于这段代码,当点击I ...
- js、jq事件绑定方式总结——以click事件为例
一.JavaScript点击事件绑定方法 1.1 HTML onclick事件属性 <button onclick="clickMe(this)">click me&l ...
- 消除点击连接或者按钮或者执行onclick事件时出现的边框
css中添加 *:not(input) { font-family: sans-serif; font-size-adjust: none; -webkit-user-select: none; -w ...
- (网页)HTML5 Canvas ( 事件交互, 点击事件为例 ) isPointInPath(转)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- Linux基础2
命令格式命令的类型:1.内部命令 linux系统使用的shell提供.2.外部命令 安装第三方软件才会. type 命令名 查命令的类型 | 把前边命令的输出作为后边命令的输入 管道 grep 对数据 ...
- 【bzoj1408】 Noi2002—Robot
http://www.lydsy.com/JudgeOnline/problem.php?id=1408 (题目链接) 题意 定义了3种数,分别求这3种数的φ的和,其中φ(1)=0. Solution ...
- ConvertHelper类
/// <summary> /// 处理数据类型转换,数制转换.编码转换相关的类 /// </summary> public sealed class ConvertHelpe ...
- text-indent无效解决方案
text-indent是用来字符缩进的. 1.text-indent所在的元素是行内元素而非块级元素.比如用在span,a等行内元素上.解决方案:在行内元素加上display:block; 或者把目标 ...
- 洛谷P1460 健康的荷斯坦奶牛 Healthy Holsteins
题目描述 农民JOHN以拥有世界上最健康的奶牛为傲.他知道每种饲料中所包含的牛所需的最低的维他命量是多少.请你帮助农夫喂养他的牛,以保持它们的健康,使喂给牛的饲料的种数最少. 给出牛所需的最低的维他命 ...
- C#制作验证码
void CodeImage(string code) { if (code == null || code.Trim() == string.Empty) return; System.Drawin ...
- git远程分支
1. 同步远程服务器上的数据到本地 git fetch origin 2. 添加远程分支 git remote add teamone git://git.tram1.ourcompany.com 添 ...
- MOOCULUS微积分-2: 数列与级数学习笔记 1. Sequences
此课程(MOOCULUS-2 "Sequences and Series")由Ohio State University于2014年在Coursera平台讲授. PDF格式教材下载 ...
- JAva使用DOM读取XML数据(解析)
原来一切都是有套路的 使用DOM解析XML文档步骤 1.创建解析器工厂对象 DocumentBuildFactory对象 2.由解析器工厂对象创建解析器对象,即DocumentBuilder对象 3. ...
- 屠蛟之路_你的名字_FirstDay
君の名は. "号外,号外!屠龙天团众志成城,惊天技杀alpha龙!号外,号外--" 苦战十日,屠龙少年们依仗最后的惊天技终于将邪恶的alpha怪龙斩杀.但是对屠龙少年而言,这是一场 ...