jquery show()方法与hide()方法(示例)

发布时间:2019-09-24编辑:脚本学堂
本文介绍下,jquery中二个常用的方法show()与hide(),二者结合可以让页面中的元素动起来,效果不错,有需要的朋友参考下。

jquery中,show()方法和hide()方法在不带任何参数的情况下,相当于css(“display”,”none/block/inline”),作用:立即隐藏或显示匹配的元素,不会有任何动画。

要实现在调用show()方法时,元素慢慢地显示出来,可以为show()方法指定一个速度参数,例如,指定一个速度关键字“slow”。

jQuery代码:
 

复制代码 代码示例:
$("element").show("slow");
 

运行该代码后,元素将在600毫秒内慢慢的显示出来。
其它的速度关键字还有”normal“和”fast“(长度分别是400毫秒和200毫秒)。
而且,还可以为显示速度指定一个数字,单位是毫秒。

例如,使用如下代码使元素在1秒钟(1000毫秒)内显示出来;
 

复制代码 代码示例:
$("element").show(1000);

前面例子中,把其中的hide()方法改为hide(600),show()方法改为show(600)。
jQuery代码:
 

复制代码 代码示例:
$(function () {
    $("#panel h5.head").toggle(function () {
        $(this).next().hide(700);
    }, function () {
        $(this).next().show(700);
    })
});

可见,hide(700)方法会同时减少“内容”的高度、宽度和不透明度,直至3个属性的值为0,最后设置该元素的CSS规则为“display:none”。

与之相对应,show(700)方法则会从上到下增大“内容”的高度,从左到右增大“内容”的宽度,同时增加“内容”的不透明度,直至新闻内容完全显示。

以上介绍了jquery show()方法与hide()方法的简单示例,希望对大家有所帮助。