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卸载全部事件的思路详解
Apr 03 jQuery
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
jQuery实现滚动效果
Nov 17 jQuery
jQuery中库的引用方法
Jan 06 jQuery
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 jQuery
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
jquery实现上传文件进度条
Mar 26 jQuery
ajax jquery实现页面某一个div的刷新效果
Mar 04 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
解析PHP中empty is_null和isset的测试
2013/06/29 PHP
PHP针对字符串开头和结尾的判断方法
2016/07/11 PHP
在php的yii2框架中整合hbase库的方法
2018/09/20 PHP
JavaScript CSS 修改学习第四章 透明度设置
2010/02/19 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
2014/10/17 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
2015/08/15 Javascript
原生JS实现的放大镜效果实例代码
2016/10/15 Javascript
Js经典案例的实例代码
2018/05/10 Javascript
详解angular脏检查原理及伪代码实现
2018/06/08 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
2018/12/30 Javascript
JS实现求5的阶乘示例
2019/01/21 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
2019/05/07 Javascript
基于layui实现高级搜索(筛选)功能
2019/07/26 Javascript
[01:00:14]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第二场 2月28日
2021/03/11 DOTA
在阿里云服务器上配置CentOS+Nginx+Python+Flask环境
2016/06/18 Python
关于Python面向对象编程的知识点总结
2017/02/14 Python
Python中将dataframe转换为字典的实例
2018/04/13 Python
Python使用tkinter库实现文本显示用户输入功能示例
2018/05/30 Python
Pycharm无法使用已经安装Selenium的解决方法
2018/10/13 Python
Python类装饰器实现方法详解
2018/12/21 Python
在Pycharm中对代码进行注释和缩进的方法详解
2019/01/20 Python
django认证系统 Authentication使用详解
2019/07/22 Python
python 项目目录结构设置
2020/02/14 Python
西班牙用户之间买卖视频游戏的平台:Wakkap
2020/03/21 全球购物
英国发展最快的在线超市之一:Click Marketplace
2021/02/15 全球购物
会计专业毕业生自我鉴定
2013/10/29 职场文书
物流仓管员岗位职责
2013/12/04 职场文书
初中体育教学反思
2014/01/14 职场文书
机械制造专业毕业生求职信
2014/03/02 职场文书
农村文化建设标语
2014/10/07 职场文书
2014年帮扶工作总结
2014/11/26 职场文书
活动总结书怎么写
2015/05/11 职场文书
教师岗位说明书
2015/09/30 职场文书
如何使用php生成zip压缩包
2021/04/21 PHP
Python 数据科学 Matplotlib图库详解
2021/07/07 Python
详细聊聊MySQL中慢SQL优化的方向
2021/08/30 MySQL