阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      jQuery 效果 – 隐藏和显示

      jQuery 效果- 隐藏和显示


      隐藏、显示、切换,滑动,淡入淡出,以及动画,哇哦!

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

      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 参数是隐藏或显示完成后所执行的函数名称。

      目录
      目录