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源码】
Mar 28 jQuery
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
基于JQuery实现页面定时弹出广告
May 08 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
Symfony2实现从数据库获取数据的方法小结
2016/03/18 PHP
Laravel5.4框架使用socialite实现github登录的方法
2019/03/20 PHP
js实现表单及时验证功能 用户信息立即验证
2016/09/13 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
2016/10/13 Javascript
Angular的自定义指令以及实例
2016/12/26 Javascript
原生js实现可爱糖果数字时间特效
2016/12/30 Javascript
[js高手之路]寄生组合式继承的优势详解
2017/08/28 Javascript
node.js-v6新版安装具体步骤(分享)
2017/09/06 Javascript
Vue中的Vux配置指南
2017/12/08 Javascript
nodejs实现爬取网站图片功能
2017/12/14 NodeJs
详细分析React 表单与事件
2020/07/08 Javascript
通过滑动翻页效果实现和移动端click事件问题
2021/01/26 Javascript
Python中zip()函数用法实例教程
2014/07/31 Python
python处理csv数据的方法
2015/03/11 Python
python selenium自动上传有赞单号的操作方法
2018/07/05 Python
Python中pip更新和三方插件安装说明
2018/07/08 Python
python中报错&quot;json.decoder.JSONDecodeError: Expecting value:&quot;的解决
2019/04/29 Python
基于python的opencv图像处理实现对斑马线的检测示例
2020/11/29 Python
Django实现简单的分页功能
2021/02/22 Python
法国时尚童装网站:Melijoe
2016/08/10 全球购物
荷兰手表网站:Watch2Day
2018/07/02 全球购物
美国折衷生活方式品牌:Robert Graham
2018/07/13 全球购物
乌克兰在线电子产品商店:MTA
2019/11/14 全球购物
Java如何获得ResultSet的总行数
2016/09/03 面试题
规划编制实施方案
2014/03/15 职场文书
植树节活动总结
2014/04/30 职场文书
大学新生军训自我鉴定范文
2014/09/13 职场文书
不听老师话的万能检讨书
2014/10/04 职场文书
预备党员入党感想
2015/08/10 职场文书
初二英语教学反思
2016/02/15 职场文书
大学生创业计划书
2019/06/24 职场文书
话题作文之学会尊重
2019/12/16 职场文书
python 中的@运算符使用
2021/05/26 Python
MySQL的索引你了解吗
2022/03/13 MySQL
多人盗宝《绿林侠盗》第三赛季4.5上线 跨平台实装
2022/04/03 其他游戏
openEuler 搭建java开发环境的详细过程
2022/06/10 Servers