教程集 www.jiaochengji.com
教程集 >  jQuery  >  jquery 教程  >  正文 jquery show()方法与hide()方法的小例子

jquery show()方法与hide()方法的小例子

发布时间:2015-12-02   编辑:jiaochengji.com
本文分享下,jquery中show()与hide()方法的小例子,show()方法和hide()方法是jQuery中最基本的动画方法,可以实现元素的动态变化,挺不错的。

本节内容:
show()方法与hide()方法示例。

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”。

以上通过几个小例子,介绍了jquery中show()方法与hide()方法的用法,希望对大家有所帮助。

您可能感兴趣的文章:
jquery hide与show方法隐藏与显示标签
jquery show()方法与hide()方法的小例子
jquery show()方法与hide()方法(示例)
jquery 延迟执行的实例分享
jquery隐藏标签、显示标签的例子
jquery显示、隐藏div的方法举例
jquery show与hide方法的例子
jquery中show()、hide()方法的用法
jquery hide方法隐藏元素的例子
基于jquery实现的定时显示与隐藏div广告的实现代码

关键词: hide  show  显示  隐藏   
[关闭]
~ ~