jQuery控制元素隱藏和顯示
1、jQuery隱藏和顯示效果
通過 jQuery,您可以使用 hide() 和 show() 方法來(lái)隱藏和顯示 HTML 元素:
$("#hide").click(function(){
$("p").hide();
}); //點(diǎn)擊id="hide"元素時(shí),隱藏所有<p>標(biāo)簽內(nèi)容;
$("#show").click(function(){
$("p").show();
}); //點(diǎn)擊id="show"元素時(shí),顯示所有<p>標(biāo)簽內(nèi)容;
2、jQuery淡入淡出效果
通過 jQuery,您可以實(shí)現(xiàn)元素的淡入淡出效果。
jQuery 擁有下面四種 fade 方法:
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()
//jQuery fadeIn() 用于淡入已隱藏的元素;
$(selector).fadeIn(speed,callback);
//speed(可選)參數(shù)規(guī)定效果的時(shí)長(zhǎng)。它可以取以下值:"slow"、"fast" 或毫秒;
//callback(可選) 參數(shù)是 fading 完成后所執(zhí)行的函數(shù)名稱;
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
}); //點(diǎn)擊<button>按鈕時(shí),不同效果的淡入id分別為"div1,div2,div3"的元素;
//jQuery fadeOut() 方法用于淡出可見元素;
$(selector).fadeOut(speed,callback);
//speed(可選)參數(shù)規(guī)定效果的時(shí)長(zhǎng)。它可以取以下值:"slow"、"fast" 或毫秒;
//callback(可選) 參數(shù)是 fading 完成后所執(zhí)行的函數(shù)名稱;
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
}); //點(diǎn)擊<button>按鈕時(shí),不同效果的淡出id分別為"div1,div2,div3"的元素;
//jQuery fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進(jìn)行切換;
//如果元素已淡出,則 fadeToggle() 會(huì)向元素添加淡入效果;
//如果元素已淡入,則 fadeToggle() 會(huì)向元素添加淡出效果;
$(selector).fadeToggle(speed,callback);
//speed(可選)參數(shù)規(guī)定效果的時(shí)長(zhǎng)。它可以取以下值:"slow"、"fast" 或毫秒;
//callback(可選) 參數(shù)是 fading 完成后所執(zhí)行的函數(shù)名稱;
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
}); //點(diǎn)擊<button>按鈕時(shí),不同效果的淡出淡入id分別為"div1,div2,div3"的元素;
//jQuery fadeTo() 方法允許漸變?yōu)榻o定的不透明度(值介于 0 與 1 之間);
$(selector).fadeTo(speed,opacity,callback);
//speed(必選)參數(shù)規(guī)定效果的時(shí)長(zhǎng)。它可以取以下值:"slow"、"fast" 或毫秒;
//opacity(必選)參數(shù)將淡入淡出效果設(shè)置為給定的不透明度(值介于 0 與 1 之間);
//callback(可選) 參數(shù)是 fading 完成后所執(zhí)行的函數(shù)名稱;
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
}); //點(diǎn)擊<button>按鈕時(shí),以給出的不透明度淡入淡出id分別為"div1,div2,div3"的元素;
3、jQuery滑動(dòng)效果
通過 jQuery,您可以在元素上創(chuàng)建滑動(dòng)效果。
jQuery 擁有以下滑動(dòng)方法:
- slideDown()
- slideUp()
- slideToggle()
//jQuery slideDown() 方法用于向下滑動(dòng)元素;
$(selector).slideDown(speed,callback);
//speed(可選)參數(shù)規(guī)定效果的時(shí)長(zhǎng),它可以取以下值:"slow"、"fast" 或毫秒;
//callback(可選)參數(shù)是滑動(dòng)完成后所執(zhí)行的函數(shù)名稱;
$("#flip").click(function(){
$("#panel").slideDown();
}); //點(diǎn)擊id為flip的元素時(shí),將id為panel的元素向下滑動(dòng);
//jQuery slideUp() 方法用于向上滑動(dòng)元素;
$(selector).slideUp(speed,callback);
//speed(可選)參數(shù)規(guī)定效果的時(shí)長(zhǎng),它可以取以下值:"slow"、"fast" 或毫秒;
//callback(可選)參數(shù)是滑動(dòng)完成后所執(zhí)行的函數(shù)名稱;
$("#flip").click(function(){
$("#panel").slideUp();
}); //點(diǎn)擊id為flip的元素時(shí),將id為panel的元素向上滑動(dòng);
//jQuery slideToggle() 方法可以在 slideDown() 與 slideUp() 方法之間進(jìn)行切換;
//如果元素向下滑動(dòng),則 slideToggle() 可向上滑動(dòng)它們;
//如果元素向上滑動(dòng),則 slideToggle() 可向下滑動(dòng)它們;
$(selector).slideToggle(speed,callback);
//speed(可選)參數(shù)規(guī)定效果的時(shí)長(zhǎng),它可以取以下值:"slow"、"fast" 或毫秒;
//callback(可選)參數(shù)是滑動(dòng)完成后所執(zhí)行的函數(shù)名稱;
$("#flip").click(function(){
$("#panel").slideToggle();
}); //點(diǎn)擊id為flip的元素時(shí),將id為panel的元素向上或向下滑動(dòng);
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家!
相關(guān)文章
jquery實(shí)現(xiàn)簡(jiǎn)單的banner輪播效果【實(shí)例】
下面小編就為大家?guī)?lái)一篇jquery實(shí)現(xiàn)簡(jiǎn)單的banner輪播效果【實(shí)例】。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2016-03-03
jQuery 3.0 的 setter和getter 模式詳解
這篇文章主要介紹了jQuery 3.0 的 setter和getter 模式詳解的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07
jQuery實(shí)現(xiàn)背景滑動(dòng)菜單
本篇文章分享了基于jQuery實(shí)現(xiàn)背景滑動(dòng)菜單的實(shí)例代碼。感興趣的朋友可以下載實(shí)例運(yùn)行,下面就跟小編一起來(lái)看看吧2016-12-12
jquery.lazyload 實(shí)現(xiàn)圖片延遲加載jquery插件
看到了淘寶產(chǎn)品介紹中,圖片是在下拉滾動(dòng)條時(shí)加載,這是一個(gè)很不錯(cuò)的用戶體驗(yàn)。減少了頁(yè)面加載的時(shí)間了,也減輕了服務(wù)器的壓力,就查了下用JQuery..2010-02-02
jQuery組件easyui基本布局實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了jQuery easyui基本布局實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08
jQuery函數(shù)的第二個(gè)參數(shù)獲取指定上下文中的DOM元素
這篇文章主要介紹了jQuery函數(shù)的第二個(gè)參數(shù)獲取指定上下文中的DOM元素,需要的朋友可以參考下2014-05-05
jQuery通過點(diǎn)擊行來(lái)刪除HTML表格行的實(shí)現(xiàn)示例
從一個(gè)HTML表使用一些時(shí)髦的效果,只要按一下該行,改行即可被刪除,這個(gè)示例比較簡(jiǎn)單,新手朋友們可以學(xué)習(xí)下2014-09-09

