// 显示div
$(“#showDiv”).show(“slow”,“swing”);
linear 匀速
在默认方式下实现元素隐藏的方法是
hide([speed,[easing],[fn]])
其中的参数含义和show方法中的一样。同样也是三个参数是可有可无的,如果不对其进行设置,那么将以默认值执行。在这里我们增加一个最后的执行函数,让其弹出一个窗口“隐藏了…”。
如下实例代码:
// 隐藏div
$(“#showDiv”).hide(“slow”,“swing”,function () {
alert(“隐藏了…”)
});
那么难道我们每次都要定义一个方法用于元素显示,再定义一个方法用于元素隐藏吗?并不是的,jQuery中也充分的考虑到了这一点,所以在有一个既能实现显示又能实现隐藏的方法
toggle([speed],[easing],[fn])
当调用该方法的时候,元素就会被隐藏掉,类似于hide()方法,当再次调用时,元素又会被显示出来,类似于show()方法。
其中的参数含义和上面一样
实例代码如下:
// 能显示能隐藏
$(“#showDiv”).toggle(“slow”,“linear”);
默认方式下实现效果如图:
二、滑动方式显示和隐藏
===============
从名字上我们应该也能区分出,**滑动方式和默认方式的不同之处其实就是显示和隐藏时的动画不一样罢了,**下面我们就来介绍一下在滑动方式下进行元素的显示、隐藏、既显示又隐藏,
滑动方式下显示
slideDown([speed],[easing],[fn])
实例代码:
// 滑动显示div
$(“#showDiv”).slideDown(“slow”);
滑动方式下隐藏
slideUp([speed,[easing],[fn]])
实例代码:
// 滑动隐藏div
$(“#showDiv”).slideUp(“fetch”);
滑动方式下既显示又隐藏:
slideToggle([speed],[easing],[fn])
实例代码:
// 滑动能显示能隐藏
$(“#showDiv”).slideToggle(“slow”);
滑动方式下实现效果如图:
三、淡入淡出方式显示和隐藏
=================
淡入淡出方式下进行元素的显示和隐藏其实和上面两种方法一样的,不同的也只是显示的效果不一样罢了,
淡入淡出方式下显示使用的方法是:
fadeIn([speed],[easing],[fn])
实现代码:
// 淡出显示div
$(“#showDiv”).fadeIn(“slow”)
淡入淡出方式下实现隐藏
fadeOut([speed],[easing],[fn])
实现代码:
// 淡出隐藏div
$(“#showDiv”).fadeOut(“fetch”);
淡入淡出方式下既显示又隐藏
fadeToggle([speed,[easing],[fn]])
实现代码:
// 淡入淡出显示和隐藏div
$(“#showDiv”).fadeToggle(“fetch”)
淡入淡出方式下运行的效果如下:
以上就是利用jQuery框架对元素进行显示和隐藏的方法,下面是上面实例的完整实现代码:
默认方式显示和隐藏动画
div显示和隐藏
四、案例:广告的自动显示和隐藏
===================
既然现在我们已经知道了jQuery框架下是如何进行元素的显示和隐藏的,那么就应该将其应用到实际的案例中去,下面通过实现广告的自动显示和隐藏的案例,来对该技术进一步加强实践。
我们要实现的是,在一个简单的网页中,页面打开三秒后将广告图显示出来,显示五秒后再将广告隐藏,这里对广告图片显示和隐藏的操作,根据上面的讲解,现在实现图片的显示和隐藏应该是很容易的了,那么到底应该如何实现延时显示和隐藏呢?
这里就要用到js中的一个定时器setTimeout(方法,时间);
该方法的第一个参数是一个方法名,如显示或隐藏图片的方法,第二个参数是毫秒数,表示页面加载完成后多少秒执行该方法,
那么根据思路,我们就可以在jQuery的入口函数中写入,页面加载完成3000毫秒,也就是三秒后调用显示图片的方法;页面加载完成8000毫秒,也就是八秒后调用隐藏图片的方法,中间空余的五秒为显示图片的时间。