jQuery toggle()设置CSS样式


Posted in Javascript onNovember 05, 2009

toggle()
切换元素的可见状态。
如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。
---------------------------------
示例
切换所有段落的可见状态。
HTML 代码:
<p>Hello</p><p style="display: none">Hello Again</p>
jQuery 代码:
$("p").toggle()
结果:
<p tyle="display: none">Hello</p><p style="display: block">Hello Again</p>
设置背景图片,以突出透明度的效果

<head> 
<title>toggle()</title> 
<style type="text/css"> 
<!-- 
body{ 
background:url(bg.jpg); 
margin:20px; padding:0px; 
} 
img{ 
border:1px solid #FFFFFF; 
} 
--> 
</style> 
<script language="javascript" src="jquery.min.js"></script> 
<script language="javascript"> 
$(function(){ 
$("img").toggle( 
function(oEvent){ 
$(oEvent.target).css("opacity","0.5"); 
}, 
function(oEvent){ 
$(oEvent.target).css("opacity","1.0"); 
} 
); 
}); 
</script> 
</head> 
<body> 
<img src="test.jpg"> 
</body>
Javascript 相关文章推荐
自己写的Javascript计算时间差函数
Oct 28 Javascript
jquery实现简单的轮换出现效果实例
Jul 23 Javascript
jquery+html5烂漫爱心表白动画代码分享
Aug 24 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
Sep 06 Javascript
微信小程序开发经验总结(推荐)
Jan 11 Javascript
深入理解js中的加载事件
Feb 08 Javascript
通过源码分析Vue的双向数据绑定详解
Sep 24 Javascript
vue2.0设置proxyTable使用axios进行跨域请求的方法
Oct 19 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
Oct 27 Javascript
JS中精巧的自动柯里化实现方法
Dec 12 Javascript
扫微信小程序码实现网站登陆实现解析
Aug 20 Javascript
js删除对象中的某一个字段的方法实现
Jan 11 Javascript
javascript 打印内容方法小结
Nov 04 #Javascript
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
Nov 04 #Javascript
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
Nov 04 #Javascript
jQuery 加上最后自己的验证
Nov 04 #Javascript
javascript Math.random()随机数函数
Nov 04 #Javascript
jquery animate 动画效果使用说明
Nov 04 #Javascript
JavaScript window.setTimeout() 的详细用法
Nov 04 #Javascript
You might like
使用数据库保存session的方法
2006/10/09 PHP
使用php+apc实现上传进度条且在IE7下不显示的问题解决方法
2013/04/25 PHP
Mootools 1.2教程 Fx.Tween的使用
2009/09/15 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
2010/09/15 Javascript
jquery 笔记 事件
2011/11/02 Javascript
javascript中将Object转换为String函数代码 (json str)
2012/04/29 Javascript
jQuery ui插件的使用方法代码实例
2013/05/08 Javascript
Javascript正则控制文本框只能输入整数或浮点数
2014/09/02 Javascript
微信小程序 解决swiper不显示图片的方法
2017/01/04 Javascript
vuex的使用及持久化state的方式详解
2018/01/23 Javascript
详解vue的diff算法原理
2018/05/20 Javascript
webpack打包nodejs项目的方法
2018/09/26 NodeJs
JavaScript中import用法总结
2019/01/20 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
2019/06/28 Javascript
小程序实现长按保存图片的方法
2019/12/31 Javascript
Vue 401配合Vuex防止多次弹框的案例
2020/11/11 Javascript
Python实现爬取知乎神回复简单爬虫代码分享
2015/01/04 Python
Python工程师面试题 与Python基础语法相关
2016/01/14 Python
pyttsx3实现中文文字转语音的方法
2018/12/24 Python
python爬虫 线程池创建并获取文件代码实例
2019/09/28 Python
python生成大写32位uuid代码
2020/03/03 Python
python模拟实现分发扑克牌
2020/04/22 Python
Python爬虫爬取百度搜索内容代码实例
2020/06/05 Python
详解基于python的图像Gabor变换及特征提取
2020/10/26 Python
CSS3中动画属性transform、transition和animation属性的区别
2016/09/25 HTML / CSS
欧缇丽美国官网:Caudalie美国
2016/12/31 全球购物
世界上最大的在线汽车租赁预订平台:Rentalcars.com(支持中文)
2018/10/12 全球购物
世界顶级户外运动品牌折扣网站:LeftLane Sports
2019/06/12 全球购物
土木工程应届生自荐信
2013/09/24 职场文书
2014年学校财务工作总结
2014/12/06 职场文书
2015毕业生简历自我评价
2015/03/02 职场文书
留学推荐信英文范文
2015/03/26 职场文书
2015年销售员工作总结范文
2015/04/07 职场文书
迎新生晚会主持词
2015/06/30 职场文书
2019年最新证婚词精选集!
2019/06/28 职场文书
Python制作表白爱心合集
2022/01/22 Python