JQuery实现层的隐藏和显示的几种方法

 通过hide()和show()方法来隐藏和显示HTML元素

 

 代码如下  

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});

可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称

如果我们希望显示与隐藏时是渐显渐隐效果可以在hide()中加时间

 代码如下  

$("#hide").click(function(){
  $("p").hide(1); //调用为1豪秒
});

$("#show").click(function(){
  $("p").show(1);//调用为1豪秒
});

  
jQuery toggle()

通过 jQuery,您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
显示被隐藏的元素,并隐藏已显示的元素:

实例

 代码如下  
$("button").click(function(){
  $("p").toggle();
});

 
语法:

$(selector).toggle(speed,callback);

可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。

时间: 2025-01-19 15:46:39

JQuery实现层的隐藏和显示的几种方法的相关文章

js设置控件的隐藏与显示的两种方法_javascript技巧

用JavaScript隐藏控件的方法有两种,分别是通过设置控件的style的"display"和"visibility"属性. 当style.display="block"或style.visibility="visible"时控件或见,当style.display="none"或style.visibility="hidden"时控件不可见.不同的是"display"

javascript控制页面控件隐藏显示的两种方法

javascript|控件|控制|显示|页面 javascript控制页面控件隐藏显示的两种方法,方法的不同之处在于控件隐藏后是否还在页面上占位 方法一: document.all["PanelSMS"].style.visibility="hidden"; document.all["PanelSMS"].style.visibility="visible"; 方法二: document.all["PanelSMS

&#106avascript控制页面控件隐藏显示的两种方法

控件|控制|显示|页面 javascript控制页面控件隐藏显示的两种方法,方法的不同之处在于控件隐藏后是否还在页面上占位方法一:document.all["PanelSMS"].style.visibility="hidden"; document.all["PanelSMS"].style.visibility="visible"; 方法二:document.all["PanelSMS"].style.

隐藏和显示PPT幻灯片的方法

  隐藏和显示PPT幻灯片的方法          1.启动PowerPoint2013并打开演示文稿,在"幻灯片"窗格中选择幻灯片,然后在"幻灯片放映"选项卡的"设置"组中单击"隐藏幻灯片"按钮,如图1所示.此时,选择的幻灯片在放映演示文稿时将会被隐藏,即该幻灯片不会被播放. 图1 单击"隐藏幻灯片"按钮 2.当"隐藏幻灯片"按钮处于按下状态时,"幻灯片"窗格中该幻

js控制页面控件隐藏显示的两种方法介绍_javascript技巧

javascript控制页面控件隐藏显示的两种方法,方法的不同之处在于控件隐藏后是否还在页面上占位 方法一: 复制代码 代码如下: document.all["panelsms"].style.visibility="hidden"; document.all["panelsms"].style.visibility="visible"; 方法二: 复制代码 代码如下: document.all["panelsms&

win7系统隐藏qq图标的两种方法

  win7系统隐藏qq图标的两种方法          具体方法如下: 一.半隐藏法 1.这种方法是利用系统隐藏QQ的!右键电脑底部任务栏,点击属性; 2.点开属性设置,找到通知区域,点开自定义; 3.我们会看到QQ旁边有三个选项,我们选择中间一个就可以将QQ隐藏了.当然我们也可以根据实际情况来选择!怕接收不到消息的话,可以选择仅显示通知; 4.设置好了之后,我们在到桌面右下角,就看到不QQ图标了,我们要点击展开所有图标按钮才能找到.这样半隐藏图标就弄好了; 二.完全隐藏法 1.是利用QQ软件

Android 实现全屏显示的几种方法整理

Android 实现全屏显示的几种方法整理 A.设置主题实现全屏 直接在AndroidManifest.xml文件中设定Activity主题为全屏模式 android:theme="@android:style/Theme.NoTitleBar.Fullscreen" B.代码实现全屏 代码实现需要分两步做,如下: 1.隐藏标题栏 requestWindowFeature(Window.FEATURE_NO_TITLE); 2.隐藏状态栏 getWindow().setFlags(Wi

PowerShell中字符串分行显示的两种方法技巧

  这篇文章主要介绍了PowerShell中字符串分行显示的两种方法技巧,本文直接给出代码实例,需要的朋友可以参考下 复制代码 代码如下: $a="1111111111111111111111101111111111111111111111111111111111111110111111111111111111011111 11111111111111111111111111111111111111111111111111111111111111111111111101111" 字符串

jQuery validate插件实现ajax验证重复的2种方法_jquery

本文实例讲述了jQuery validate插件实现ajax验证重复的2种方法.分享给大家供大家参考,具体如下: jquery validate 经过这种多年的改良,已经很完善了.它能满足80%的验证需要,如果validate自带的功能,不能满足我们需求,它提供了addMethod来扩展功能.下面就举个小例子来说明一下addMethod的用法. 完整demo实例代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//