jQuery如何使用fadeToggle()方法?代码示例

2021年3月25日11:44:05 发表评论 685 次浏览

fadeToggle()方法在jQuery中, 可以在fadeIn()和fadeOut()方法之间切换。如果元素被淡入, fadeToggle()将淡出。如果元素淡出, 则fadeToggle()将淡入。

语法如下:

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

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

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

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

范例1:本示例以给定的速度显示fadeToggle()方法的效果。速度可以毫秒为单位设置。

<!DOCTYPE html>  
< html >  
  
< head > 
     < title > 
         jQuery fadeToggle() Method
     </ 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 Toggle
     </ button > 
      
     <!-- Script to use fadeToggle() Method -->           
     < script > 
         $(document).ready(function() {
             $("#btn").click(function() {
                 $("#Outer").fadeToggle(1000);
             });
         });
     </ script > 
</ body >  
  
</ html >

输出如下:

在单击按钮之前:

jQuery | fadeToggle()方法1

首先单击按钮后:

jQuery | fadeToggle()方法2

在第二次单击按钮后:

jQuery | fadeToggle()方法3

范例2:本示例显示带有缓动的fadeToggle()方法效果。缓动用于设置动画不同点中元素的速度。

<!DOCTYPE html>  
< html >  
     < head > 
         < title > 
             jQuery fadeToggle() Method
         </ 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 Toggle
         </ button > 
             
         < script > 
             $(document).ready(function() {
                 $("#btn").click(function() {
                     $("#Outer").fadeToggle("swing");
                 });
             });
         </ script > 
     </ body >  
</ html >

输出如下:

在单击按钮之前:

jQuery | fadeToggle()方法4

首先单击按钮后:

jQuery | fadeToggle()方法5

在第二次单击按钮后:

jQuery | fadeToggle()方法6

木子山

发表评论

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