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插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
jquery将标签元素的高设为屏幕的百分比
Apr 19 jQuery
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
jQuery实现全选、反选和不选功能
Aug 16 jQuery
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
JQuery 又谈ajax局部刷新
Nov 27 jQuery
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 jQuery
jquery插件实现图片悬浮
Apr 16 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
我的论坛源代码(八)
2006/10/09 PHP
php 获取select下拉列表框的值
2010/05/08 PHP
CI框架入门之MVC简单示例
2016/11/21 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
javascript中call和apply方法浅谈
2013/09/27 Javascript
javascript中match函数的用法小结
2014/02/08 Javascript
jQuery中事件与动画的总结分享
2016/05/24 Javascript
深入理解JavaScript函数参数(推荐)
2016/07/26 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
2016/08/19 Javascript
详解如何用webpack打包一个网站应用项目
2017/07/12 Javascript
自制简易打赏功能的实例
2017/09/02 Javascript
vuejs使用递归组件实现树形目录的方法
2017/09/30 Javascript
Vue项目添加动态浏览器头部title的方法
2018/07/11 Javascript
vue实现通讯录功能
2018/07/14 Javascript
解决layui动态添加的元素click等事件触发不了的问题
2019/09/20 Javascript
[56:35]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第二局
2016/02/27 DOTA
selenium python浏览器多窗口处理代码示例
2018/01/15 Python
python实现Decorator模式实例代码
2018/02/09 Python
pytorch制作自己的LMDB数据操作示例
2019/12/18 Python
Python numpy大矩阵运算内存不足如何解决
2020/11/19 Python
python实现b站直播自动发送弹幕功能
2021/02/20 Python
韩国著名的在线综合购物网站:Akmall
2016/08/07 全球购物
德国家具在线:Fashion For Home
2017/03/11 全球购物
瑞典灯具和照明网上商店:Lamp24.se
2018/03/17 全球购物
园艺师求职信
2014/04/27 职场文书
销售竞赛活动方案
2014/08/23 职场文书
我为党旗添光彩演讲稿
2014/09/13 职场文书
2015年学校总务工作总结
2015/07/20 职场文书
干部作风纪律整顿心得体会
2016/01/23 职场文书
2016年推广普通话宣传周活动总结
2016/04/06 职场文书
大学学生会主席竞选稿怎么写?
2019/08/19 职场文书
2019年关于小学生课外阅读情况的分析报告
2019/12/02 职场文书
2019年圣诞节祝福语集锦
2019/12/25 职场文书
pyqt5打包成exe可执行文件的方法
2021/05/14 Python
Python中的matplotlib绘制百分比堆叠柱状图,并为每一个类别设置不同的填充图案
2022/04/20 Python
python pandas 解析(读取、写入)CSV 文件的操作方法
2022/12/24 Python