jquery使用slideDown實(shí)現(xiàn)模塊緩慢拉出效果的方法
本文實(shí)例講述了jquery使用slideDown實(shí)現(xiàn)模塊緩慢拉出效果的方法。分享給大家供大家參考。具體分析如下:
下面的JS代碼通過按鈕控制指定的區(qū)域緩慢拉出顯示的效果
<!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideDown("slow"); }); }); </script> <style type="text/css"> #panel,#flip { padding:5px; text-align:center; background-color:#e5eecc; border:solid 1px #c3c3c3; } #panel { padding:50px; display:none; } </style> </head> <body> <div id="flip">Click to slide down panel</div> <div id="panel">Hello world!</div> </body> </html>
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
jQuery使用ajax傳遞json對(duì)象到服務(wù)端及contentType的用法示例
這篇文章主要介紹了jQuery使用ajax傳遞json對(duì)象到服務(wù)端及contentType的用法,結(jié)合實(shí)例形式分析了jQuery使用ajax傳遞json對(duì)象數(shù)據(jù)及服務(wù)器響應(yīng)相關(guān)操作技巧,需要的朋友可以參考下2020-03-03jQuery移動(dòng)頁(yè)面開發(fā)中的觸摸事件與虛擬鼠標(biāo)事件簡(jiǎn)介
這篇文章主要介紹了jQuery移動(dòng)頁(yè)面開發(fā)中的觸摸事件與虛擬鼠標(biāo)事件的簡(jiǎn)單編寫方法,jQuery是當(dāng)今人氣最高的Javascript庫(kù)并被廣泛應(yīng)用于移動(dòng)web的開發(fā),需要的朋友可以參考下2015-12-12jquery實(shí)現(xiàn)倒計(jì)時(shí)效果
這篇文章主要介紹了jquery實(shí)現(xiàn)倒計(jì)時(shí)效果,根據(jù)設(shè)計(jì)一個(gè)游戲引出的倒計(jì)時(shí)功能,需要的朋友可以參考下2015-12-12jQuery EasyUI Tab 選項(xiàng)卡問題小結(jié)
這篇文章主要介紹了jQuery EasyUI Tab 選項(xiàng)卡問題小結(jié),在項(xiàng)目開發(fā)階段很多朋友都遇到過此問題,其實(shí)解決辦法很簡(jiǎn)單的,下面小編給大家分享下問題原因及解決辦法,需要的朋友可以參考下2016-08-08JQuery 1.3.2以上版本中出現(xiàn)pareseerror錯(cuò)誤的解決方法
最近正在做一個(gè)系統(tǒng),測(cè)試組那邊不停的報(bào)告bug:后臺(tái)、前臺(tái)各種列表報(bào)告js彈出窗錯(cuò)誤,內(nèi)容僅僅是一句“pareseerror”!2011-01-01JQuery插件fancybox無(wú)法在彈出層使用左右鍵的解決辦法
本篇文章主要是對(duì)JQuery插件fancybox無(wú)法在彈出層使用左右鍵的解決辦法進(jìn)行了介紹,需要的朋友可以過來(lái)參考下,希望對(duì)大家有所幫助2013-12-12