jQuery技术

show()方法和hide()方法让元素动起来

字号+ 作者: 来源: 2014-11-16 22:49 我要评论( )

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(600);
 }, function () {
 $(this).next().show(600);
 })
});

从代码的执行过程中,可以发现,hide(600)方法会同时减少“内容”的高度、宽度和不透明度,直至3个属性的值为0,最后设置该元素的CSS规则为“display:none”。

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

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 7个有用的jQuery小技巧

    7个有用的jQuery小技巧

    2016-02-26 13:02

  • jQuery制作select双向选择列表

    jQuery制作select双向选择列表

    2016-02-26 11:00

  • 全面详细的jQuery常见开发技巧手册

    全面详细的jQuery常见开发技巧手册

    2016-02-26 10:02

  • 强大的jQuery移动插件Top 10

    强大的jQuery移动插件Top 10

    2016-02-25 09:05

网友点评