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

