>>分享Web前端开发技术,并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 20846 个阅读者 刷新本主题
 * 贴子主题:  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 重新编辑]
网站系统异常


系统异常信息
Request URL: http://www.javathinker.net/WEB-INF/lybbs/jsp/topic.jsp?postID=2404

java.lang.NullPointerException

如果你不知道错误发生的原因,请把上面完整的信息提交给本站管理人员