使用jQuery设置指定时间后页面指定元素隐藏

2018-6-21 15:21 来自本站原创 8,824 6 2
[摘要]

在网页上我们通常会使用弹出框或者悬浮框来对重要的信息予以展示,但有时候为了兼顾到用户体验需要让其指定几秒后自动消失,使用jQuery我们就能够轻松实现。

在制作网页的时候,我们一般会使用悬浮条幅、弹窗框等来向用户展示某些重要的信息,如公告、APP下载提示条等。一般情况下,我们会设置相应的关闭按钮,但有时候我们设置其几秒后自动消失是不是更加人性化呢?

使用jQuery设置指定时间后页面指定元素隐藏

手机端百度网页的APP下载提示框

使用jQuery可以轻松实现该效果,下面提供两段代码供君选择。

参考代码

//代码一(以淡出形式隐藏)
jQuery(document).ready(function() {
$("#myElem").show().delay(5000).fadeOut();
});

//代码二(直接隐藏)
setTimeout(function(){
$("#myElem").hide();
},5000);

注意:上述代码中#myElem为ID="myElem"的元素,根据实际情况进行修改,5000为5000毫秒,也就是5秒。

哦对了,记得要提前引入jQuery库哦

效果

代码一实际效果如下所示:

使用jQuery设置指定时间后页面指定元素隐藏

本文最后更新于2018年6月23日,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

如果认为本文对您有所帮助请赞助本站

支付宝扫一扫赞助微信扫一扫赞助

  • 支付宝扫一扫赞助
  • 微信扫一扫赞助
  • 声明:凡注明“本站原创”的所有文字图片等资料,版权均属 雅兮网 所有,欢迎转载,但务请注明出处;
    目前评论:6   其中:访客  0   博主  0
    加载中...
    1. 6年前 (2018-06-24) 0楼

      这个功能挺实用的,非常不错

    2. 6年前 (2018-06-22) 0楼

      最关键的就是时间种子~
      日常支持车长~

    3. 6年前 (2018-06-22) 0楼

      没看懂怎么用

      • Wing
        6年前 (2018-06-22)  地下1层

        @NICE: 没看懂的话 要巩固下js基础知识了哦

    4. 6年前 (2018-06-21) 0楼

      文章不错非常喜欢

    发表评论

    疑问 调皮 难过 抠鼻 吓 微笑 可爱 坏笑 惊讶 发呆 疑问 大兵 偷笑 咒骂 发怒 白眼 鼓掌 得意 擦汗 亲亲 大哭 呲牙 晕 强

    分享 6 2 8,824
    Top