今天依然是 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> ...
随机推荐
- SQLAlchemy 操作数据库
首先安装 SQLAlchemy install PyMySQL install sqlalchemy 代码: #!/usr/bin/env python # encoding: utf-8 " ...
- [bzoj1984]月下“毛景树”
Description 毛毛虫经过及时的变形,最终逃过的一劫,离开了菜妈的菜园.毛毛虫经过千山万水,历尽千辛万苦,最后来到了小小的绍兴一中的校园里.爬啊爬~爬啊爬~~毛毛虫爬到了一颗小小的" ...
- MapReduce实现数据去重
一.原理分析 Mapreduce的处理过程,由于Mapreduce会在Map~reduce中,将重复的Key合并在一起,所以Mapreduce很容易就去除重复的行.Map无须做任何处理,设置Map中写 ...
- 【bzoj2242】 SDOI2011—计算器
http://www.lydsy.com/JudgeOnline/problem.php?id=2242 (题目链接) 题意 给出y,z,p.求:1.yz mod p:2.xy=z(mod p):3. ...
- ubuntu14.04 配置中文输入法
ubuntu14.04自带中文输入法,只要配置就可以了. 1.安装中文支持 System Settings --> Language Support 点击 install/remove lan ...
- python 集合、函数和文件操作
1.set集合 set集合是一个无序.不可重复.可嵌套的序列,基本功能是进行成员关系测试和删除重复元素,可以使用大括号({})或者 set()函数创建集合,注意:创建一个空集合必须用 set() 而不 ...
- django-redis和redis-py
项目之前使用memcache做缓存,现在转到redis,改写几个语句的事情,然后就这种我把django-redis和py-redis搞混了,记录一下. django默认使用memcache做缓存,这里 ...
- zabbix监控系列(2)之zabbix-agent安装
zabbix-agent的安装不用LAMP的支持,所以直接源码安装,make两下,改下配置文件即可,改完后可以把源码包直接压缩打包就可以给其他agent用了,可谓,一次编译,多台使用. NO1.解包压 ...
- POJ1426 Find The Multiple (宽搜思想)
Find The Multiple Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 24768 Accepted: 102 ...
- 泛在传感器网络(Ubiquitous Sensor Network; USN)
http://wiki.mbalib.com/wiki/%E6%B3%9B%E5%9C%A8%E4%BC%A0%E6%84%9F%E5%99%A8%E7%BD%91%E7%BB%9C 什么是泛在传感器 ...