jQuery toggle()設(shè)置CSS樣式
更新時(shí)間：2009年11月05日 00:03:32 作者：
如果元素是可見(jiàn)的，切換為隱藏的；如果元素是隱藏的，切換為可見(jiàn)的。
toggle()
切換元素的可見(jiàn)狀態(tài)。
如果元素是可見(jiàn)的，切換為隱藏的；如果元素是隱藏的，切換為可見(jiàn)的。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
示例
切換所有段落的可見(jiàn)狀態(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>
切換元素的可見(jiàn)狀態(tài)。
如果元素是可見(jiàn)的，切換為隱藏的；如果元素是隱藏的，切換為可見(jiàn)的。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
示例
切換所有段落的可見(jiàn)狀態(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動(dòng)畫事件和動(dòng)畫函數(shù)
在jquery中，jquery動(dòng)畫事件和動(dòng)畫函數(shù)經(jīng)常用的到，今天小編抽時(shí)間給大家整理了些關(guān)于常用的jquery動(dòng)畫事件和動(dòng)畫函數(shù)，對(duì)jquery動(dòng)畫函數(shù)和動(dòng)畫事件相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2015-11-11
自己動(dòng)手制作jquery插件之自動(dòng)添加刪除行功能介紹
這個(gè)插件的上篇訪問(wèn)量很不好，幾乎是我寫的文章里最少的點(diǎn)擊量的了，不知道是不是因?yàn)榇蠹覍?duì)我說(shuō)的這個(gè)插件不感興趣還是說(shuō)我寫的東西技術(shù)含量太差了，呵，那我只能孤芳自賞了2011-10-10
jQuery ul標(biāo)簽下拉菜單演示代碼，需要使用基于jquery的下拉菜單效果的朋友可以參考下。2010-12-12
jQuery實(shí)現(xiàn)背景滑動(dòng)菜單
本篇文章分享了基于jQuery實(shí)現(xiàn)背景滑動(dòng)菜單的實(shí)例代碼。感興趣的朋友可以下載實(shí)例運(yùn)行，下面就跟小編一起來(lái)看看吧2016-12-12![基于jquery的lazy loader插件實(shí)現(xiàn)圖片的延遲加載[簡(jiǎn)單使用]](http://img.jbzj.com/images/xgimg/bcimg4.png)
基于jquery的lazy loader插件實(shí)現(xiàn)圖片的延遲加載[簡(jiǎn)單使用]
當(dāng)網(wǎng)站上有大量圖片要展示的話，如果一次把所有的圖片都加載出來(lái)的話，這勢(shì)必會(huì)影響網(wǎng)站的加載速度，給用戶帶來(lái)比較差的體驗(yàn)。2011-05-05
這篇文章主要為大家詳細(xì)介紹了基于jquery實(shí)現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
jQuery實(shí)現(xiàn)通過(guò)方向鍵控制div塊上下左右移動(dòng)的方法【測(cè)試可用】
這篇文章主要介紹了jQuery實(shí)現(xiàn)通過(guò)方向鍵控制div塊上下左右移動(dòng)的方法,涉及jQuery結(jié)合鍵盤事件響應(yīng)動(dòng)態(tài)修改頁(yè)面元素屬性相關(guān)操作技巧,需要的朋友可以參考下2018-04-04
prop() 方法應(yīng)該用于檢索屬性值，例如 DOM 屬性，如 selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected，這里腳本之家小編就為大家介紹一下啊2020-01-01
jquery實(shí)現(xiàn)從數(shù)組移除指定的值
這篇文章主要介紹了jquery實(shí)現(xiàn)從數(shù)組移除指定的值,涉及jQuery中g(shù)rep()方法對(duì)數(shù)組元素進(jìn)行過(guò)濾篩選的技巧,需要的朋友可以參考下2015-06-06
jQuery.ajax實(shí)現(xiàn)根據(jù)不同的Content-Type做出不同的響應(yīng)
使用H5+ASP.NET General Handler開(kāi)發(fā)項(xiàng)目，使用ajax進(jìn)行前后端的通訊。有一個(gè)場(chǎng)景需求是根據(jù)服務(wù)器返回的不同數(shù)據(jù)類型，前端進(jìn)行不同的響應(yīng)，這里記錄下如何使用$.ajax實(shí)現(xiàn)該需求,需要的朋友可以參考下2016-11-11