在网页上我们通常会使用弹出框或者悬浮框来对重要的信息予以展示,但有时候为了兼顾到用户体验需要让其指定几秒后自动消失,使用jQuery我们就能够轻松实现。
在制作网页的时候,我们一般会使用悬浮条幅、弹窗框等来向用户展示某些重要的信息,如公告、APP下载提示条等。一般情况下,我们会设置相应的关闭按钮,但有时候我们设置其几秒后自动消失是不是更加人性化呢?
手机端百度网页的APP下载提示框
使用jQuery可以轻松实现该效果,下面提供两段代码供君选择。
参考代码
//代码一(以淡出形式隐藏) jQuery(document).ready(function() { $("#myElem").show().delay(5000).fadeOut(); }); //代码二(直接隐藏) setTimeout(function(){ $("#myElem").hide(); },5000);
注意:上述代码中#myElem为ID="myElem"的元素,根据实际情况进行修改,5000为5000毫秒,也就是5秒。
哦对了,记得要提前引入jQuery库哦
效果
代码一实际效果如下所示:
这个功能挺实用的,非常不错
最关键的就是时间种子~
日常支持车长~
没看懂怎么用
@NICE: 没看懂的话 要巩固下js基础知识了哦
文章不错非常喜欢
@今天头条: 欢迎常来支持,另外贵站名字略吊