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

当前位置: 编程技术>jquery

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

来源: 互联网发布时间：2014-09-03

本文导语: 在jquery中，show()方法和hide()方法在不带任何参数的情况下，相当于css(“display”,”none/block/inline”)，作用：立即隐藏或显示匹配的元素，不会有任何动画。要实现在调用show()方法时，元素慢慢地显示出来，可以为show()方法指定...

在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()方法的简单示例，希望对大家有所帮助。