jQuery如何使用fadeIn()方法?示例

2021年3月26日16:26:44 发表评论 695 次浏览

fadeIn()方法在jQuery中, 用于将选定元素的不透明度从隐藏更改为可见。隐藏的元素将不会显示。

语法如下:

$(selector).fadeIn( speed, easing, callback )

参数:此方法接受上述和以下所述的三个参数:

  • 速度:它是一个可选参数, 用于指定衰落效果的速度。速度的默认值为400毫秒。可能的速度值为:
    • 毫秒
    • "slow"
    • "fast"
  • easing:它是一个可选参数, 用于指定元素到动画不同点的速度。缓动的默认值为" swing"。easing的可能值是:
    • "swing"
    • "linear"
  • callback:它是可选参数。在fadeIn()方法完成后执行回调函数。

以下示例说明了jQuery中的fadeIn()方法:

范例1:本示例描述了速度为1000毫秒的fadeIn()方法。

<!DOCTYPE html>  
< html >  
     < head > 
         < title > 
             fadeIn() Method in jQuery
         </ title >
          
         < style >
             #Outer {
                 border: 1px solid black;
                 padding-top: 40px;
                 height: 140px;
                 background: green;
                 display: none;
             }
         </ style >
          
         < script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" >
         </ script >
     </ head >
      
     < body style = "text-align:center;" >  
          
         < div id = "Outer" >
             < h1 style = "color:white;" >  
                 lsbin  
             </ h1 >  
         </ div >< br >
          
         < button id = "btn" > 
             Fade In
         </ button > 
          
         <!-- jQuery script of fadeIn() method -->
         < script > 
             $(document).ready(function() {
                 $("#btn").click(function() {
                     $("#Outer").fadeIn(1000);
                 });
             });
         </ script > 
     </ body >  
</ html >

输出如下:

在单击按钮之前:

jQuery如何使用fadeIn()方法?示例1

单击按钮后:

jQuery如何使用fadeIn()方法?示例2

范例2:这个例子描述了带有" swing"缓动的fadeIn()方法。

<!DOCTYPE html>  
< html >  
     < head > 
         < title > 
             fadeIn() Method in jQuery
         </ title >
          
         < style >
             #Outer {
                 border: 1px solid black;
                 padding-top: 40px;
                 height: 140px;
                 background: green;
                 display: none;
             }
         </ style >
          
         < script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" >
         </ script >
     </ head >
      
     < body style = "text-align:center;" >  
          
         < div id = "Outer" >
             < h1 style = "color:white;" >  
                 lsbin  
             </ h1 >  
         </ div >< br >
          
         < button id = "btn" > 
             Fade In
         </ button > 
          
         <!-- jQuery script of fadeIn() method -->
         < script > 
             $(document).ready(function() {
                 $("#btn").click(function() {
                     $("#Outer").fadeIn("swing");
                 });
             });
         </ script > 
     </ body >  
</ html >

输出如下:

在单击按钮之前:

jQuery如何使用fadeIn()方法?示例3

单击按钮后:

jQuery如何使用fadeIn()方法?示例4

木子山

发表评论

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