jQuery实现文本显示一段时间后隐藏的方法分析


Posted in jQuery onJune 20, 2019

本文实例讲述了jQuery实现文本显示一段时间后隐藏的方法。分享给大家供大家参考,具体如下:

点击button时,提示信息显示,8秒后,信息隐藏。

<input id="place_order" name="place_order" type="submit" />
<div class="after_submit_remind" style="display: none;">
  请耐心等待,这段文本显示8秒后会消失,安拓网络。
</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.3water.com/code/HtmlJsRun

在线HTML/CSS/JavaScript前端代码调试运行工具:
http://tools.3water.com/code/WebCodeRun

更多关于jQuery相关内容可查看本站专题:《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
jQuery冲突问题解决方法
Jan 19 jQuery
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 #jQuery
使用JQuery自动完成插件Auto Complete详解
Jun 18 #jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 #jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 #jQuery
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 #jQuery
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 #jQuery
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 #jQuery
You might like
实用函数9
2007/11/08 PHP
phpinfo 系统查看参数函数代码
2009/06/05 PHP
PHPMailer邮件发送的实现代码
2013/05/04 PHP
在Windows XP下安装Apache+MySQL+PHP环境
2015/02/22 PHP
PHP读取文本文件并逐行输出该行使用最多的字符与对应次数的方法
2016/11/25 PHP
PHP开发APP端微信支付功能
2017/02/17 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
TP3.2批量上传文件或图片 同名冲突问题的解决方法
2017/08/01 PHP
JavaScript实现自己的DOM选择器原理及代码
2013/03/04 Javascript
使用AngularJS来实现HTML页面嵌套的方法
2015/06/17 Javascript
详解Bootstrap glyphicons字体图标
2016/01/04 Javascript
基于BootStarp的Dailog
2016/04/28 Javascript
3种vue组件的书写形式
2017/11/29 Javascript
解决jquery有正确返回值但不执行success函数的问题
2018/08/20 jQuery
ionic使用angularjs表单验证(模板验证)
2018/12/12 Javascript
javascript系统时间设置操作示例
2019/06/17 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
2019/10/09 Javascript
javaScript实现一个队列的方法
2020/07/14 Javascript
vue3.0中setup使用(两种用法)
2020/12/02 Vue.js
梳理一下vue中的生命周期
2020/12/30 Vue.js
Vue 3自定义指令开发的相关总结
2021/01/29 Vue.js
Pandas 对Dataframe结构排序的实现方法
2018/04/10 Python
Python实现栈的方法详解【基于数组和单链表两种方法】
2020/02/22 Python
Python定义一个Actor任务
2020/07/29 Python
Python通过队列来实现进程间通信的示例
2020/10/14 Python
css3实现图片遮罩效果鼠标hover以后出现文字
2013/11/05 HTML / CSS
加拿大最大的书店:Indigo
2017/01/01 全球购物
VICHY薇姿美国官方网站:欧洲药房第一的抗衰老品牌
2017/11/22 全球购物
Java中各种基本数据类型的默认值都是什么
2016/12/22 面试题
vue项目实现分页效果
2021/03/24 Vue.js
餐饮主管岗位职责
2013/12/10 职场文书
数控技术应用个人求职信范文
2014/02/03 职场文书
高考励志标语
2014/06/05 职场文书
歌唱比赛策划方案
2014/06/06 职场文书
小学六一儿童节活动方案
2014/08/27 职场文书
党员转正介绍人意见
2015/06/03 职场文书