js控制div显示隐藏实现 jq点击隐藏再点击显示切换( 二 )

fadeToggle([speed,[easing],[fn]])
实现代码：
// 淡入淡出显示和隐藏div$("#showDiv").fadeToggle("fetch")淡入淡出方式下运行的效果如下：
以上就是利用 jQuery 框架对元素进行显示和隐藏的方法，下面是上面实例的完整实现代码：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>默认方式显示和隐藏动画</title><script type="text/javascript" src="https://www.520longzhigu.com/js/jquery-3.3.1.min.js"></script><script>function hideFn() {// 隐藏div/*$("#showDiv").hide("slow","swing",function () {alert("隐藏了...")});*/// 滑动隐藏div$("#showDiv").slideUp("fetch");// 淡出隐藏div// $("#showDiv").fadeOut("fetch");}function showFn() {// 显示div// $("#showDiv").show("slow","swing");// linear 匀速// 滑动显示div// $("#showDiv").slideDown("slow");// 淡出显示div$("#showDiv").fadeIn("slow")}function toggleFn() {// 能显示能隐藏// $("#showDiv").toggle("slow","linear");// 滑动能显示能隐藏// $("#showDiv").slideToggle("slow");// 淡入淡出显示和隐藏div$("#showDiv").fadeToggle("fetch")}</script></head><body><input type="button" value="https://www.520longzhigu.com/diannao/点击按钮隐藏div" onclick="hideFn()"><input type="button" value="https://www.520longzhigu.com/diannao/点击按钮显示div" onclick="showFn()"><input type="button" value="https://www.520longzhigu.com/diannao/点击按钮切换div显示和隐藏" onclick="toggleFn()"><div id="showDiv" style="width:300px;height:300px;background:pink">div显示和隐藏</div></body></html>四、案例：广告的自动显示和隐藏既然现在我们已经知道了 jQuery 框架下是如何进行元素的显示和隐藏的，那么就应该将其应用到实际的案例中去，下面通过实现广告的自动显示和隐藏的案例，来对该技术进一步加强实践。
我们要实现的是，在一个简单的网页中，页面打开三秒后将广告图显示出来，显示五秒后再将广告隐藏，这里对广告图片显示和隐藏的操作，根据上面的讲解，现在实现图片的显示和隐藏应该是很容易的了，那么到底应该如何实现延时显示和隐藏呢？
这里就要用到 js 中的一个定时器 setTimeout(方法,时间);
该方法的第一个参数是一个方法名，如显示或隐藏图片的方法，第二个参数是毫秒数，表示页面加载完成后多少秒执行该方法。
那么根据思路，我们就可以在 jQuery 的入口函数中写入，页面加载完成 3000 毫秒，也就是三秒后调用显示图片的方法；页面加载完成 8000 毫秒，也就是八秒后调用隐藏图片的方法，中间空余的五秒为显示图片的时间。
下面我们来讲上述需求实现，完整代码如下：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>广告的自动显示与隐藏</title><style>#content{width:100%;height:500px;background:#999}</style><script type="text/javascript" src="https://www.520longzhigu.com/js/jquery-3.3.1.min.js"></script><script>// 图片延时显示和隐藏的步骤// 1、在页面加载完成之后调用定时器setTimeout()方法// 2、在定时器中调用显示广告和隐藏广告的函数// 3、使用show和hide方法实现图片的显示和隐藏// 设置入口函数$(function () {// 延时3秒后显示图片setTimeout(adShow,3000);// 延时6秒后隐藏图片setTimeout(adHide,8000);});// 显示图片function adShow() {$("#ad").show("slow");}// 隐藏图片function adHide() {$("#ad").hide("fast");}</script></head><body><div><div id="ad" style="display: none;"><img style="width:100%" src="https://www.520longzhigu.com/img/adv.jpg" /></div><div id="content">正文部分</div></div></body></html>效果如下：

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：