jQuery hide()使用和代码示例

2021年3月18日14:43:58 发表评论 772 次浏览

hide()是jQuery中的一种内置方法, 用于隐藏所选元素。

语法如下:

$(selector).hide(duration, easing, call_function);

选择器是选定的元素。

参数:

它接受以下指定的三个参数:

  • duration:它指定隐藏效果的速度。
  • easing:它指定元素在动画的不同点的速度。
  • call_function:这是隐藏操作后要执行的回调函数。

返回值:它不返回任何值。

jQuery代码显示hide()方法的工作方式:

代码1:

在下面的代码中, 没有参数用于传递给此方法。

< html >
   
< head >
     < script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" >
     </ script >
     <!-- jQuery code to show the working of this method -->
     < script >
         $(document).ready(function() {
             $(".b1").click(function() {
                 $("p").hide();
             });
         });
     </ script >
     < style >
         div {
             width: 50%;
             height: 80px;
             padding: 20px;
             margin: 10px;
             border: 2px solid green;
             font-size: 30px;
         }
           
         .b1 {
             margin: 10px;
         }
     </ style >
</ head >
   
< body >
     < div >
         < p >lsbin !.</ p >
     </ div >
     <!-- click on this button and above paragraph will disappear -->
     < button class = "b1" >Click me !</ button >
   
</ body >
   
</ html >

输出如下:

在点击"点击我!"之前按钮-

jQuery | hide()使用和代码示例1

点击"点击我!"后按钮-

jQuery | hide()使用和代码示例2

代码2:

在下面的代码中, 参数传递给此方法。

< html >
  
< head >
     < script 
     src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" >
     </ script >
     < script >
         <!-- jQuery code to show the working of this method -->
         $(document).ready(function() {
             $(".btn1").click(function() {
                 $("p").hide(1000, function() {
                     alert("Hide() method has finished its working!");
                 });
             });
         });
     </ script >
     < style >
         p {
             width: 40%;
             padding: 20px;
             height: 50px;
             border: 2px solid green;
         }
     </ style >
</ head >
  
< body >
  
     < p >lsbin.!</ p >
     <!-- click on this button and above paragraph will hide -->
     < button class = "btn1" >Click to Hide</ button >
  
</ body >
  
</ html >

输出如下:

在点击"点击隐藏"按钮之前,

jQuery | hide()使用和代码示例3

点击"点击隐藏"按钮后,

jQuery | hide()使用和代码示例4

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: