>> 欢迎您客人: 登录 | 注册 | 在线 | 搜索 | 风格 | 帮助 | 统计 | 文章

返回首页

>>分享Web前端开发技术，并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持

书籍支持

卫琴直播

品书摘要

在线测试

资源下载

联系我们

Java技术网站 → 『 Java开发技术』 → 『 Web前端开发技术专题』 → jQuery 效果：隐藏和显示

您是本文章第 20845 个阅读者

* 贴子主题: jQuery 效果：隐藏和显示

点赞(0) 收藏

作者:flybird 发表时间：2019-08-19 16:46:03

消息

查看

搜索

好友

邮件

复制

引用

$(document).ready(function(){

  $(".flip").click(function(){
      $(".panel").toggle();
   });

});

div.panel,p.flip
{

width:90%;

margin:auto;

padding:5px;

text-align:center;

background:#e5eecc;

border:solid 1px #c3c3c3;

}

div.panel

{

height:100px;

display:none;

}

jQuery 效果- 隐藏和显示

隐藏、显示、切换，滑动，淡入淡出，以及动画！

jQuery hide() 和 show()

通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：

范例

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

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

             语法:

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

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

             可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

             可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

            下面的例子演示了带有 speed 参数的 hide() 方法：

范例

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

下面的例子演示了带有 speed 参数的 hide() 方法，并使用回调函数：

范例

$ ( document ) . ready ( function ( ) {
  $ ( " .hidebtn " ) . click ( function ( ) {
    $ ( " div " ) . hide ( 1000 , " linear " , function ( ) {
       alert ( " Hide() 方法已完成! " ) ;
     } ) ;
   } ) ;
} ) ;

第二个参数是一个字符串，表示过渡使用哪种缓动函数。（译者注：jQuery自身提供"linear" 和 "swing"，其他可以使用相关的插件）。

jQuery toggle()

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

显示被隐藏的元素，并隐藏已显示的元素：

范例

$ ( " button " ) . click ( function ( ) {
$ ( " p " ) . toggle ( ) ;
} ) ;

             语法:

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

             可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

             可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

程序猿的技术大观园：www.javathinker.net

[这个贴子最后由 flybird 在 2020-02-07 21:19:13 重新编辑]

Java精品书籍推荐