本文實(shí)例講述了jQuery實(shí)現(xiàn)文本顯示一段時間后隱藏的方法。分享給大家供大家參考,具體如下:
點(diǎn)擊button時,提示信息顯示,8秒后,信息隱藏。
<input id="place_order" name="place_order" type="submit" /> <div class="after_submit_remind" style="display: none;"> 請耐心等待,這段文本顯示8秒后會消失,安拓網(wǎng)絡(luò)。 </div>
jQuery(document).ready(function(){ jQuery(document).on('click', 'input#place_order', function(){ jQuery(".after_submit_remind").show().delay(8000).hide(0); }); });
擴(kuò)展:令時間每秒自動減1;
將text中的“8”改為“9”;
jQuery(document).on('click', 'input#place_order', function(){ jQuery(".after_submit_remind").show().delay(8000).hide(0); jQuery(function (){ reduceTime(); }); function reduceTime() { var auto_reduce = jQuery("#auto-time").html(); if(auto_reduce == 0){ jQuery("#auto-time").html("9"); }else{ jQuery("#auto-time").html(--auto_reduce); setTimeout(reduceTime,1000); } }; });/*顯示 8s 的content*/
感興趣的朋友可以使用如下工具測試上述代碼運(yùn)行效果:
在線HTML/CSS/JavaScript代碼運(yùn)行工具:
http://tools.jb51.net/code/HtmlJsRun
在線HTML/CSS/JavaScript前端代碼調(diào)試運(yùn)行工具:
http://tools.jb51.net/code/WebCodeRun
更多關(guān)于jQuery相關(guān)內(nèi)容可查看本站專題:《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com