- 相關(guān)推薦
jQuery控制元素顯示隱藏切換滑動的方法總結(jié)
jQuery 隱藏和顯示
通過 hide() 和 show() 兩個(gè)函數(shù)，jQuery 支持對 HTML 元素的隱藏和顯示：
實(shí)例
復(fù)制代碼 代碼如下:
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
hide() 和 show() 都可以設(shè)置兩個(gè)可選參數(shù)：speed 和 callback。
語法：
復(fù)制代碼 代碼如下:
$(selector).hide(speed,callback)
$(selector).show(speed,callback)
speed 參數(shù)規(guī)定顯示或隱藏的速度。可以設(shè)置這些值："slow", "fast", "normal" 或毫秒。
callback 參數(shù)是在 hide 或 show 函數(shù)完成之后被執(zhí)行的函數(shù)名稱。您將在本教程下面的章節(jié)學(xué)習(xí)更多有關(guān) callback 參數(shù)的知識。
實(shí)例
復(fù)制代碼 代碼如下:
$("button").click(function(){
$("p").hide(1000);
});
callback 參數(shù)是在該函數(shù)完成之后被執(zhí)行的函數(shù)名稱。您將在本教程下面的章節(jié)學(xué)習(xí)更多有關(guān) callback 參數(shù)的知識。
jQuery 滑動函數(shù) - slideDown, slideUp, slideToggle
jQuery 擁有以下滑動函數(shù)：
復(fù)制代碼 代碼如下:
$(selector).slideDown(speed,callback)
$(selector).slideUp(speed,callback)
$(selector).slideToggle(speed,callback)
speed 參數(shù)可以設(shè)置這些值："slow", "fast", "normal" 或毫秒。
callback 參數(shù)是在該函數(shù)完成之后被執(zhí)行的函數(shù)名稱。您將在本教程下面的章節(jié)學(xué)習(xí)更多有關(guān) callback 參數(shù)的知識。
slideDown() 實(shí)例
復(fù)制代碼 代碼如下:
$(".flip").click(function(){
$(".panel").slideDown();
});
jQuery Fade 函數(shù) - fadeIn(), fadeOut(), fadeTo()
jQuery 擁有以下 fade 函數(shù)：
復(fù)制代碼 代碼如下:
$(selector).fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
$(selector).fadeTo(speed,opacity,callback)
speed 參數(shù)可以設(shè)置這些值："slow", "fast", "normal" 或 毫秒。
fadeTo() 函數(shù)中的 opacity 參數(shù)規(guī)定減弱到給定的不透明度。
callback 參數(shù)是在該函數(shù)完成之后被執(zhí)行的函數(shù)名稱。您將在本教程下面的章節(jié)學(xué)習(xí)更多有關(guān) callback 參數(shù)的知識。
jQuery 自定義動畫
jQuery 函數(shù)創(chuàng)建自定義動畫的語法：
復(fù)制代碼 代碼如下:
$(selector).animate({params},[duration],[easing],[callback])
關(guān)鍵的參數(shù)是 params。它定義產(chǎn)生動畫的 CSS 屬性。可以同時(shí)設(shè)置多個(gè)此類屬性：
復(fù)制代碼 代碼如下:
animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});
第二個(gè)參數(shù)是 duration。它定義用來應(yīng)用到動畫的時(shí)間。它設(shè)置的值是："slow", "fast", "normal" 或毫秒。
實(shí)例
復(fù)制代碼 代碼如下:
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
});
$(selector).hide() 隱藏被選元素 $(selector).show() 顯示被選元素 $(selector).toggle() 切換（在隱藏與顯示之間）被選元素 $(selector).slideDown() 向下滑動（顯示）被選元素 $(selector).slideUp() 向上滑動（隱藏）被選元素 $(selector).slideToggle() 對被選元素切換向上滑動和向下滑動 $(selector).fadeIn() 淡入被選元素 $(selector).fadeOut() 淡出被選元素 $(selector).fadeTo() 把被選元素淡出為給定的不透明度 $(selector).animate() 對被選元素執(zhí)行自定義動畫
【jQuery控制元素顯示隱藏切換滑動的方法總結(jié)】相關(guān)文章：
關(guān)于jquery簡單圖片切換顯示效果實(shí)現(xiàn)方法介紹10-01
關(guān)于jQuery實(shí)現(xiàn)高亮顯示的方法介紹08-20
jquery之超簡單的div顯示和隱藏特效demo簡介05-15
隱藏的文件怎么顯示09-29
隱藏的文件夾怎么顯示08-02
jQuery中prev()方法用法07-16
怎么把隱藏的文件顯示出來07-12
隱藏文件夾顯示技巧06-22