jQuery滑動(dòng)效果實(shí)現(xiàn)方法分析
本文實(shí)例講述了jQuery滑動(dòng)效果實(shí)現(xiàn)方法。分享給大家供大家參考,具體如下:
jQuery 滑動(dòng)方法:
1.slideDown()
方法:用于向下滑動(dòng)元素
語法:
$(selector).slideDown(speed,callback);
2.slideUp()
方法:用于向上滑動(dòng)元素
語法:
$(selector).slideUp(speed,callback);
3.slideToggle()
方法:可以在slideDown()
與slideUp()
方法之間進(jìn)行切換。
語法:
$(selector).slideToggle(speed,callback);
eg:
<!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideToggle("slow"); }); }); </script> <style type="text/css"> div.panel,p.flip{ margin:0px; padding:5px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; } </style> </head> <body> <div class="panel"> <p>Hello world</p> <p>Hello everyone,I am so cool</p> </div> <p class="flip">click</p> </body> </html>
運(yùn)行結(jié)果:
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于jQuery相關(guān)內(nèi)容還可查看本站專題:《jQuery切換特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- jQuery實(shí)現(xiàn)基本動(dòng)畫效果的方法詳解
- jQuery動(dòng)畫animate方法使用介紹
- jquery animate 動(dòng)畫效果使用說明
- JQuery動(dòng)畫animate的stop方法使用詳解
- jQuery實(shí)現(xiàn)切換頁面過渡動(dòng)畫效果
- jQuery Animation實(shí)現(xiàn)CSS3動(dòng)畫示例介紹
- jQuery實(shí)現(xiàn)基本淡入淡出效果的方法詳解
- jQuery實(shí)現(xiàn)的淡入淡出圖片輪播效果示例
- jQuery實(shí)現(xiàn)動(dòng)畫、消失、顯現(xiàn)、漸出、漸入效果示例
相關(guān)文章
Jquery 實(shí)現(xiàn)table樣式的設(shè)定
這篇文章主要介紹了Jquery 實(shí)現(xiàn)table樣式的設(shè)定方法的相關(guān)資料,需要的朋友可以參考下2015-01-01jQuery實(shí)現(xiàn)列表內(nèi)容的動(dòng)態(tài)載入特效
這里給大家分享的是使用jQuery實(shí)現(xiàn)列表內(nèi)容的動(dòng)態(tài)載入的特效,效果相當(dāng)棒,后面附上瀑布流的實(shí)現(xiàn)思路和關(guān)鍵代碼,有需要的小伙伴可以參考下。2015-08-08JQuery select控件的相關(guān)操作實(shí)現(xiàn)代碼
JQuery獲取和設(shè)置Select選項(xiàng)方法匯總?cè)缦?,需要的朋友可以參考?/div> 2012-09-09jQuery+Ajax實(shí)現(xiàn)用戶名重名實(shí)時(shí)檢測(cè)
這篇文章主要為大家詳細(xì)介紹了jQuery Ajax實(shí)現(xiàn)用戶名重名實(shí)時(shí)檢測(cè),針對(duì)用戶注冊(cè)時(shí)出現(xiàn)的用戶名重名問題進(jìn)行自動(dòng)檢測(cè),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06基于jquery實(shí)現(xiàn)拆分姓名的方法(純JS版)
jquery拆分姓名處理程序如下,純js實(shí)現(xiàn)的,感興趣的朋友可以參考下哈,希望對(duì)你有所幫助2013-05-05最新評(píng)論