jQuery實現(xiàn)文本顯示一段時間后隱藏的方法分析

更新時間：2019年06月20日 10:34:33 作者：longzhoufeng

這篇文章主要介紹了jQuery實現(xiàn)文本顯示一段時間后隱藏的方法,結(jié)合實例形式分析了jQuery事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下

本文實例講述了jQuery實現(xià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);
  });
});

擴展：令時間每秒自動減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*/

感興趣的朋友可以使用如下工具測試上述代碼運行效果：

在線HTML/CSS/JavaScript代碼運行工具：
http://tools.jb51.net/code/HtmlJsRun

在線HTML/CSS/JavaScript前端代碼調(diào)試運行工具：
http://tools.jb51.net/code/WebCodeRun

更多關(guān)于jQuery相關(guān)內(nèi)容可查看本站專題：《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

jQuery插件實現(xiàn)多級聯(lián)動菜單效果
開發(fā)一個jQuery插件實現(xiàn)多級聯(lián)動菜單效果，實現(xiàn)步驟很詳細(xì)，感興趣的小伙伴們可以參考一下
2015-12-12
jquery的ajax跨域請求原理和示例
這篇文章主要介紹了jquery的ajax跨域請求原理和示例,需要的朋友可以參考下
2014-05-05
Jquery實現(xiàn)的一種常用高亮效果示例代碼
本篇文章只要是對Jquery實現(xiàn)的一種常用高亮效果示例代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-01-01
比Jquery的document.ready更快的方法
這個是上次在博客園看到的一篇文章，經(jīng)測試，確實比jquery的$(document).ready(function(){....})更快，并且在ie和火狐等主流瀏覽器上都沒問題
2010-04-04
jQuery實現(xiàn)點擊彈出背景變暗遮罩效果實例代碼
這篇文章主要介紹了jQuery實現(xiàn)點擊彈出背景變暗遮罩效果的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-06-06
基于jquery實現(xiàn)多選下拉列表
這篇文章主要為大家詳細(xì)介紹了基于jquery實現(xiàn)多選下拉列表，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-08-08
jQuery中判斷一個元素是否為另一個元素的子元素(或者其本身)
寫了比較簡單的jQuery判斷一個元素是否為另一個元素的子元素(或者其本身)的兩個擴展
2012-03-03
jQuery Deferred和Promise創(chuàng)建響應(yīng)式應(yīng)用程序詳細(xì)介紹
接下來我們一起探索一下JavaScript中的 Deferred 和 Promise 的概念Deferred 提供了一個抽象的非阻塞的解決方案（如Ajax 請求的響應(yīng)），它創(chuàng)建一個promise對象，其目的是在未來某個時間點返回一個響應(yīng)，感興趣的可以參考下
2013-03-03
jQuery常用且重要方法匯總
這篇文章主要介紹了jQuery常用且重要方法匯總的相關(guān)資料,需要的朋友可以參考下
2015-07-07
Jquery實時監(jiān)聽input value的實例
下面小編就為大家?guī)硪黄狫query實時監(jiān)聽input value的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-01-01