jQuery技术

show()方法和hide()方法

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

show()方法和hide()方法是jQuery中最基本的动画方法,在HTML文档里,为一个元素调用hide()方法,会将元素的display样式改为“one”。

例如,使用如下的代码隐藏element元素。

$("element").hide();

这段代码的功能与用css()方法设置dispaly属性效果相同:

$("element").css("display","none");

当把元素隐藏后,可以使用show()方法将元素的display样式设置为先前的显示状态。

jQuery代码如下:

$(element).show();

在前面的例子中,已经多次使用hide()方法和show方法,通过这两种方法可以控制“内容”的显示和隐藏。

jQuery代码如下:

$(function() {
 $("#panel h5.head").toggle(function() {
 $(this).next().hide();
 }, function() {
 $(this).next().show();
 });
});

注意hide()方法在将“内容”的display属性值设置为“none”之前,会记住原先的display属性。当调用show()方法时,会根据hide()方法记住display属性值来显示元素。

在本例中,”内容“的display属性的值是“block”,当点击“标题”链接执行hide()方法的时候,hide()方法会做两步动作,首先会记住“内容”的display属性的值“display”属性的值“block”,然后把display属性的值设置为“none”。

 

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

网友点评