jQuery实现广告显示和隐藏动画
更新时间：2021年07月04日 15:35:30 作者：跑起来要带风！
这篇文章主要为大家详细介绍了jQuery实现广告显示和隐藏动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
我们经常会看到几秒后出现了广告，显示了几秒后广告就消失了，下面就用JQuery框架来实现这个功能。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>广告的自动显示与隐藏</title>
<style>
#content{width:100%;height:500px;background:#999}
</style>
<!--引入jquery-->
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script>
/*
需求：
1. 当页面加载完，3秒后。自动显示广告
2. 广告显示5秒后，自动消失。
分析：
1. 使用定时器来完成。setTimeout (执行一次定时器)
2. 分析发现JQuery的显示和隐藏动画效果其实就是控制display
3. 使用 show/hide方法来完成广告的显示
*/
//入口函数，在页面加载完成之后，定义定时器，调用这两个方法
$(function () {
//定义定时器，调用adShow方法 3秒后执行一次
setTimeout(adShow,3000);
//定义定时器，调用adHide方法，8秒后执行一次
setTimeout(adHide,8000);
});
//显示广告
function adShow() {
//获取广告div，调用显示方法
$("#ad").show("slow");
}
//隐藏广告
function adHide() {
//获取广告div，调用隐藏方法
$("#ad").hide("slow");
}
</script>
</head>
<body>
<!-- 整体的DIV -->
<div>
<!-- 广告DIV -->
<div id="ad" style="display: none;">
<img style="width:100%" src="../img/adv.jpg" />
</div>
<!-- 下方正文部分 -->
<div id="content">
正文部分
</div>
</div>
</body>
</html>
目录结构：
运行结果：
一开始进入的时候，广告没有显示
三秒后，广告出现
广告显示五秒后，消失
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了使用jquery制作非常漂亮的相册集，步骤详细，细节介绍完整，感兴趣的小伙伴们可以参考一下2016-04-04
这篇文章介绍了jQuery操作CSS样式的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-03-03
jQuery.getScript加载同域JS为xhr请求，导致firebug不能正常读取js，因此不能够断点该js2012-02-02
利用JQuery操作iframe父页面、子页面的元素和方法汇总
这篇文章主要给大家介绍了关于利用JQuery操作iframe父页面、子页面的元素和方法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2017-09-09
早上打开邮箱，一位朋友问我之前JQuery-Easyui 怎么做可以实现多级菜单2012-01-01
如果你想你的博客页面某些部分引起读者的注意，你可以使这些部分震动，如广告等等，今天这篇文章将介绍怎样使你的页面中的元素震动起来,感兴趣的你可不要错过了哦，或许对你学习jquery ui 有所帮助2013-02-02
position方法获取匹配元素相对父元素的偏移。接下来通过本文给大家分享jQuery Position方法使用和兼容性的相关知识，感兴趣的朋友一起看看吧2017-08-08
本文章来给大家介绍在我们输入完内容之后直接按Ctrl+Enter提交表单实现程序，此方法一般是用于textarea中哦，其它的input这类的就不需了。2015-10-10
这篇文章主要介绍了jQuery添加删除DOM元素方法,结合实例形式较为详细的分析讲述了jQuery关于DOM元素节点的添加与删除相关技巧,需要的朋友可以参考下2016-01-01
这篇文章主要为大家详细介绍了jQuery实现移动端悬浮拖动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
最新评论