jQuery toggle()設(shè)置CSS樣式
更新時(shí)間：2009年11月05日 00:03:32 作者：
如果元素是可見的，切換為隱藏的；如果元素是隱藏的，切換為可見的。
toggle()
切換元素的可見狀態(tài)。
如果元素是可見的，切換為隱藏的；如果元素是隱藏的，切換為可見的。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
示例
切換所有段落的可見狀態(tài)。
HTML 代碼:
<p>Hello</p><p style="display: none">Hello Again</p>
jQuery 代碼:
$("p").toggle()
結(jié)果:
<p tyle="display: none">Hello</p><p style="display: block">Hello Again</p>
設(shè)置背景圖片，以突出透明度的效果
<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>
切換元素的可見狀態(tài)。
如果元素是可見的，切換為隱藏的；如果元素是隱藏的，切換為可見的。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
示例
切換所有段落的可見狀態(tài)。
HTML 代碼:
<p>Hello</p><p style="display: none">Hello Again</p>
jQuery 代碼:
$("p").toggle()
結(jié)果:
<p tyle="display: none">Hello</p><p style="display: block">Hello Again</p>
設(shè)置背景圖片，以突出透明度的效果
復(fù)制代碼 代碼如下:
<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>
相關(guān)文章
今天我再來向大家介紹一款jquery圖表插件jqplot，下面是一些中文說明，希望對你有所幫助2012-02-02
基于jquery的手風(fēng)琴圖片展示效果實(shí)現(xiàn)方法
這篇文章主要介紹了基于jquery的手風(fēng)琴圖片展示效果實(shí)現(xiàn)方法,涉及jQuery基于事件實(shí)現(xiàn)改變css樣式的方法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2014-12-12
jQuery+CSS實(shí)現(xiàn)的table表格行列轉(zhuǎn)置功能示例
這篇文章主要介紹了jQuery+CSS實(shí)現(xiàn)的table表格行列轉(zhuǎn)置功能,涉及jQuery事件響應(yīng)及頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-01-01
jquery動(dòng)態(tài)導(dǎo)航插件dynamicNav用法實(shí)例分析
這篇文章主要介紹了jquery動(dòng)態(tài)導(dǎo)航插件dynamicNav用法,較為詳細(xì)的分析了jquery導(dǎo)航插件的原理及具體使用方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
一個(gè)簡單的動(dòng)態(tài)加載js和css的jquery代碼
動(dòng)態(tài)加載js和css的jquery，可用于在生成頁面時(shí)通過js函數(shù)加載一些共通的js和css文件,需要的朋友可以參考下2014-09-09
基于jquery的讓頁面控件不可用的實(shí)現(xiàn)代碼
當(dāng)用戶需要某項(xiàng)功能時(shí)要填寫一些表單信息，在填寫完成并提交后，該部分信息是不允許再次修改的。表單包含TextBox、DropDownList、CheckBox等控件。2010-04-04
如果你明白了前面講的使用jquery.fn對象屬性的方法創(chuàng)建jquery對象的方法，那么使用extend()方法創(chuàng)建jquery對象就比較容易理解了。理解了嗎，一定要仔細(xì)揣摩，仔細(xì)研究。我也是再慢慢的學(xué)習(xí)，慢慢的領(lǐng)悟2012-08-08
判斷對象是否Window的實(shí)現(xiàn)代碼，需要的朋友可以參考下。2012-01-01
jQuery實(shí)現(xiàn)級聯(lián)下拉框?qū)崙?zhàn)（5）
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)級聯(lián)下拉框的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
jQuery實(shí)現(xiàn)可拖拽3D萬花筒旋轉(zhuǎn)特效
本文主要介紹了使用了CSS3立體效果的強(qiáng)大特效，本特效使用jQuery跟CSS3 transform來實(shí)現(xiàn)在用戶鼠標(biāo)按下拖動(dòng)時(shí)，環(huán)形圖片墻可以跟隨鼠標(biāo)進(jìn)行3D旋轉(zhuǎn)動(dòng)畫。下面跟著小編一起來看下吧2017-01-01