jQuery中的toggle()设置CSS样式

来源:岁月联盟 编辑:zhuzhu 时间:2009-11-05

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>

出处:http://blog.csdn.net/guoquanyou/archive/2008/10/21/3111018.aspx