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学习笔记4 Eval函数
Jan 11 Javascript
javascript 程序库的比较(一)之DOM功能
Apr 07 Javascript
删除javascript所创建子节点的方法
May 21 Javascript
JavaScript对象数组排序实例方法浅析
Jun 15 Javascript
Bootstrap Table的使用总结
Oct 08 Javascript
提高JavaScript执行效率的23个实用技巧
Mar 01 Javascript
vue-router实现webApp切换页面动画效果代码
May 25 Javascript
vue-cli单页应用改成多页应用配置详解
Jul 14 Javascript
值得收藏的vuejs安装教程
Nov 21 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
Jan 24 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
Mar 12 Javascript
原生JS使用Canvas实现拖拽式绘图功能
Jun 05 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
php在字符串中查找另一个字符串
2008/11/19 PHP
memcached 和 mysql 主从环境下php开发代码详解
2010/05/16 PHP
PHP实现微信JS-SDK接口选择相册及拍照并上传的方法
2016/12/05 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
验证用户是否修改过页面的数据的实现方法
2008/09/26 Javascript
Jquery index()方法 获取相应元素索引值
2012/10/12 Javascript
Android中的jQuery:AQuery简介
2014/05/06 Javascript
使用delegate方法为一个tr标签加一个链接
2014/06/27 Javascript
AngularJS 指令详细介绍
2016/07/27 Javascript
js仿淘宝商品放大预览功能
2017/03/15 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
2017/07/12 jQuery
关于定制FileField中的上传文件名称问题
2017/08/22 Javascript
微信小程序 WXML节点信息查询详解
2019/07/29 Javascript
原生JavaScript实现滑动拖动验证的示例代码
2019/12/06 Javascript
vue不操作dom实现图片轮播的示例代码
2019/12/18 Javascript
JavaScript中的this妙用实例分析
2020/05/09 Javascript
[01:06]欢迎来到上海,TI9
2018/08/26 DOTA
[51:29]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第一场 11.05
2020/11/05 DOTA
python中list常用操作实例详解
2015/06/03 Python
详解Python 序列化Serialize 和 反序列化Deserialize
2017/08/20 Python
python jieba分词并统计词频后输出结果到Excel和txt文档方法
2018/02/11 Python
python获取网页中所有图片并筛选指定分辨率的方法
2018/03/31 Python
python 去除txt文本中的空格、数字、特定字母等方法
2018/07/24 Python
python生成每日报表数据(Excel)并邮件发送的实例
2019/02/03 Python
django框架forms组件用法实例详解
2019/12/10 Python
Python使用uuid库生成唯一标识ID
2020/02/12 Python
Python中os模块功能与用法详解
2020/02/26 Python
python安装sklearn模块的方法详解
2020/11/28 Python
详解Canvas实用库Fabric.js使用手册
2019/01/07 HTML / CSS
GUESS西班牙官方网上商城:美国服饰品牌
2017/03/15 全球购物
亚洲最大的运动鞋寄售店:KicksCrew
2020/11/26 全球购物
函授本科个人自我鉴定
2014/03/25 职场文书
关键在于落实心得体会
2014/09/03 职场文书
毕业生就业推荐表导师评语
2014/12/31 职场文书
MySQL性能压力基准测试工具sysbench的使用简介
2021/04/21 MySQL
ubuntu下常用apt命令介绍
2022/06/05 Servers