今天依然是 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> ...
随机推荐
- PL/SQL连接Oracle客户端步骤
首先,安装oracle,再安装plsql 打开plsql——>选择“首选项(preferences)”——>输入oracle客户端路径 如下图:
- JVM学习笔记:虚拟机性能监控
JDK中除了包含与开发密切相关的jar包外,还包含了很多非常实用的工具.在%JAVA_HOME%\bin\目录下面除了命令行工具外,还包括了几个强大的可视化工具.这些工具可以辅助我们开发.调试应用程序 ...
- hdu 5269 trie树
现场想到了lowbit(X xor Y)=X和Y从右向左数,对应相同的数的个数+1...然而并没有想到接下来用trie树 然后就想排个序试试...然后就整个人都不好了啊摔 sol:用trie,一边in ...
- java里面时间差比较
currentTime.before(this.getLastActivateTime(time))//返回true 或者false public Date getLastActivateTime(t ...
- pycharm安装python模块
这个工具真的好好,真的很喜欢,它很方便,很漂亮,各种好 pycharm安装python模块:file-setting-搜索project inte OK
- 【Alpha阶段】第二次Scrum例会
燃尽图软件存在bug,正在排查修复:(已修复)由于时区设置到了美国,图表显示有问题. 会议信息 时间:2016.10.18 22:00 时长:1h 地点:大运村1号公寓5楼楼道 类型:设计阶段阶段性会 ...
- Fix failed to start session in Ubuntu
When you are at login, press Ctrl+Alt+F1. It will take you to command line interface from the GUI. I ...
- java编程思想-java中的并发(四)
五. 新类库中的构件 Java SE5的java.util.concurrent引入了大量设计用来解决并发问题的新类.学习使用它们将有助于编写出更加简单而强壮的并发程序. 1. CountDownLa ...
- 10月14日下午MySQL数据库基础
数据库基础 类型: 1.varchar:字符串,用于姓名班级,地址等,地址一般长50,姓名长20 2.int:整数,用于成绩,序号等 3.float:小数 4.bit:布尔型,用于性别等 5.时间也用 ...
- JavaWeb学习笔记——JSP标准标签库JSTL