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

心已赠人 2021-11-02 17:14 295阅读 0赞

本文实例讲述了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*/

![在这里插入图片描述][aHR0cHM6Ly9vc2NpbWcub3NjaGluYS5uZXQvb3NjbmV0LzZmZThkNGE3YzMwMjBjMGFjYmU2ZTQxNDI3NWE4MTYyNDEwLmpwZw]

[aHR0cHM6Ly9vc2NpbWcub3NjaGluYS5uZXQvb3NjbmV0LzZmZThkNGE3YzMwMjBjMGFjYmU2ZTQxNDI3NWE4MTYyNDEwLmpwZw]: /images/20211101/9992e9b7d3844ba18c702fae1454a84f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，295人围观）

还没有评论，来说两句吧...

相关阅读

相关试用ChatGPT一段时间后

最近半年，互联网一款现象级的应用诞生：「ChatGPT」；其火爆的程度，不输前面的羊了个羊；最初了解到ChatGPT还是春节的时候，但那时网上的测评还没引起足够的好奇心

浅浅的花香味﹌/ 2024年03月22日 13:46/ 0 赞/ 113 阅读

相关 jquery控制隐藏显示切换

<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"

缺乏、安全感/ 2023年06月11日 04:22/ 0 赞/ 22 阅读

相关 CSS 超长文本的隐藏和鼠标覆盖后显示

在 BootStrap Table 实践中，数据文本过长导致文本本身溢出表格区域，为了实现鼠标覆盖能够显示文本，正常状况下省略显示。 CSS 文件，代码示例： .h

深藏阁楼爱情的钟/ 2022年07月13日 07:39/ 0 赞/ 498 阅读

相关 java 获取一段时间段List的方法

获取一段时间段的方法调用参数 "2018-01-01" ,"2019-01-01" ,"YYYY-MM-DD" ,返回list 时间 public static

小鱼儿/ 2022年04月23日 13:56/ 0 赞/ 615 阅读

相关 JQuery 定时操作实现图片显示与隐藏

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></t

心已赠人/ 2022年04月21日 22:30/ 0 赞/ 254 阅读

相关 jquery判断元素是否是隐藏的(隐藏的显示,显示的隐藏)

if(node.is(':hidden')){　　//如果node是隐藏的则显示node元素，否则隐藏　　node.show();　 }else{

梦里梦外;/ 2022年03月25日 05:51/ 0 赞/ 348 阅读

相关 jquery实现div模块的隐藏和显示

-------------------- 1、点击按钮 <button id="fat-btn" class="btn btn-primary" type="bu

深碍√TFBOYSˉ_/ 2022年02月24日 12:28/ 0 赞/ 341 阅读

相关 jQuery方法实现下拉菜单显示和隐藏

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

电玩女神/ 2022年01月27日 01:29/ 0 赞/ 361 阅读

相关 JQuery隐藏和显示效果

1：引用插件jquery-3.2.1.min.js： 2：为了方便看出效果和美观，在外层放一个div盒子，给这个盒子设置一些样式：比如边距，边框，宽，高，

朴灿烈づ我的快乐病毒、/ 2021年12月20日 13:55/ 0 赞/ 374 阅读

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

本文实例讲述了jQuery实现文本显示一段时间后隐藏的方法。分享给大家供大家参考，具体如下：点击button时，提示信息显示，8秒后，信息隐藏。 <input

心已赠人/ 2021年11月02日 17:14/ 0 赞/ 296 阅读