jQuery toggle()设置CSS样式
更新时间：2009年11月05日 00:03:32 作者：
如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
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>
切换元素的可见状态。
如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
示例
切换所有段落的可见状态。
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>
相关文章
在jquery中，jquery动画事件和动画函数经常用的到，今天小编抽时间给大家整理了些关于常用的jquery动画事件和动画函数，对jquery动画函数和动画事件相关知识感兴趣的朋友一起学习吧2015-11-11
这个插件的上篇访问量很不好，几乎是我写的文章里最少的点击量的了，不知道是不是因为大家对我说的这个插件不感兴趣还是说我写的东西技术含量太差了，呵，那我只能孤芳自赏了2011-10-10
jQuery ul标签下拉菜单演示代码，需要使用基于jquery的下拉菜单效果的朋友可以参考下。2010-12-12
本篇文章分享了基于jQuery实现背景滑动菜单的实例代码。感兴趣的朋友可以下载实例运行，下面就跟小编一起来看看吧2016-12-12![基于jquery的lazy loader插件实现图片的延迟加载[简单使用]](//img.jbzj.com/images/xgimg/bcimg4.png)
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
当网站上有大量图片要展示的话，如果一次把所有的图片都加载出来的话，这势必会影响网站的加载速度，给用户带来比较差的体验。2011-05-05
这篇文章主要为大家详细介绍了基于jquery实现轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-03-03
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
这篇文章主要介绍了jQuery实现通过方向键控制div块上下左右移动的方法,涉及jQuery结合键盘事件响应动态修改页面元素属性相关操作技巧,需要的朋友可以参考下2018-04-04
prop() 方法应该用于检索属性值，例如 DOM 属性，如 selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected，这里脚本之家小编就为大家介绍一下啊2020-01-01
这篇文章主要介绍了jquery实现从数组移除指定的值,涉及jQuery中grep()方法对数组元素进行过滤筛选的技巧,需要的朋友可以参考下2015-06-06
jQuery.ajax实现根据不同的Content-Type做出不同的响应
使用H5+ASP.NET General Handler开发项目，使用ajax进行前后端的通讯。有一个场景需求是根据服务器返回的不同数据类型，前端进行不同的响应，这里记录下如何使用$.ajax实现该需求,需要的朋友可以参考下2016-11-11
![基于jquery的lazy loader插件实现图片的延迟加载[简单使用]](http://img.jbzj.com/images/xgimg/bcimg4.png)
最新评论