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 相关文章推荐
node.js中的fs.readFileSync方法使用说明
Dec 15 Javascript
JavaScript前补零操作实例
Mar 11 Javascript
JS实现的颜色实时渐变效果完整实例
Mar 25 Javascript
AngularJS 依赖注入详解和简单实例
Jul 28 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
Aug 06 Javascript
vue 2.0组件与v-model详解
Mar 27 Javascript
详解JS构造函数中this和return
Sep 16 Javascript
vue中子组件调用兄弟组件方法
Jul 06 Javascript
微信小程序实现底部导航
Nov 05 Javascript
详解如何在vue项目中使用layui框架及采坑
May 05 Javascript
在layui框架中select下拉框监听更改事件的例子
Sep 20 Javascript
vue 组件内获取actions的response方式
Nov 08 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的魔术方法__get()和__set()使用介绍
2012/09/19 PHP
如何使用php绘制在图片上的正余弦曲线
2013/06/08 PHP
如何修改和添加Apache的默认站点目录
2013/07/05 PHP
thinkPHP中_initialize方法实例分析
2016/12/05 PHP
详谈symfony window下的安装 安装时候出现的问题以及解决方法
2017/09/28 PHP
javascript实现的基于金山词霸网络翻译的代码
2010/01/15 Javascript
分享一个asp.net pager分页控件
2012/01/04 Javascript
jquery 插件学习(六)
2012/08/06 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
2013/12/26 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
2014/10/14 Javascript
同一个网页中实现多个JavaScript特效的方法
2015/02/02 Javascript
深入理解Java线程编程中的阻塞队列容器
2015/12/07 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
2016/07/12 Javascript
Javascript之面向对象--接口
2016/12/02 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
2016/12/12 Javascript
基于JavaScript实现选项卡效果
2017/07/21 Javascript
使用veloticy-ui生成文字动画效果
2018/02/08 Javascript
ES2020 新特性(种草)
2020/01/12 Javascript
python实现根据图标提取分类应用程序实例
2014/09/28 Python
Python列出一个文件夹及其子目录的所有文件
2016/06/30 Python
Flask框架通过Flask_login实现用户登录功能示例
2018/07/17 Python
flask框架路由常用定义方式总结
2019/07/23 Python
Python 使用 docopt 解析json参数文件过程讲解
2019/08/13 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
jupyter notebook 使用过程中python莫名崩溃的原因及解决方式
2020/04/10 Python
详解CSS3 用border写 空心三角箭头 (两种写法)
2017/09/29 HTML / CSS
Html5移动端div固定到底部实现底部导航条的几种方式
2021/03/09 HTML / CSS
欧姆龙医疗保健与医疗产品:Omron Healthcare
2020/02/10 全球购物
计算机软件个人的自荐信范文
2013/12/01 职场文书
信息学院毕业生自荐信范文
2014/03/04 职场文书
2015年元旦文艺汇演主持词
2014/03/26 职场文书
项目合作意向书范本
2014/04/01 职场文书
公路局群众路线教育实践活动第一阶段工作汇报
2014/10/25 职场文书
2015年元旦主持词开场白
2014/12/14 职场文书
10大幻兽系恶魔果实 蝙蝠果实上榜,第一自愈能力强
2022/03/18 日漫
Ubuntu安装Mysql+启用远程连接的完整过程
2022/06/21 Servers