jQuery如何使用动画效果fadeOut()方法?示例

2021年3月18日16:03:27 发表评论 652 次浏览

fadeOut()方法在jQuery中, 用于将所选元素的不透明度级别从可见更改为隐藏。通过使用此方法, 填充元素将不占用任何空间。

语法如下:

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

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

  • 速度:它是一个可选参数, 用于指定衰落效果的速度。速度的默认值为400毫秒。可能的速度值为:
    • 毫秒
    • "慢"
    • "快速"
  • 缓和:它是一个可选参数, 用于指定元素到动画不同点的速度。缓动的默认值为" swing"。放松的可能价值是:
    • "摇摆"
    • "线性"
  • 打回来:它是可选参数。回调函数在fadeOut()方法完成之后执行。

范例1:本示例显示fadeIn和fadeOut效果。

<!DOCTYPE html>
< html >
  
< head > 
     < title >
         jQuery | fadeOut() Method
     </ title >
  
     < script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" >
     </ script >
</ head > 
  
< body style = "text-align:center;" >  
  
     < h1 style = "color:green;" >  
         lsbin
     </ h1 >  
      
     < h2 >jQuery | fadeOut() Method</ h2 >
  
     < button class = "btn1" >Fade out</ button >
  
     < button class = "btn2" >Fade in</ button >
      
     <!-- Script to display fadeIn and fadeOut effect -->
     < script >
         $(document).ready(function(){
             $(".btn1").click(function(){
                 $("h2").fadeOut()
             });
              
             $(".btn2").click(function(){
                 $("h2").fadeIn();
             });
         });
     </ script >
</ body >
  
</ html >

输出如下

jQuery |效果fadeOut()方法1

范例2:本示例创建fadeIn和fadeOut效果并设置其速度。给定的速度(以毫秒为单位)。

<!DOCTYPE html>
< html >
  
< head > 
     < title >
         jQuery | fadeOut() Method
     </ title >
  
     < script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" >
     </ script >
</ head > 
  
< body style = "text-align:center;" >  
  
     < h1 style = "color:green;" >  
         lsbin
     </ h1 >  
      
     < h2 >jQuery | fadeOut() Method</ h2 >
  
     < button class = "btn1" >Fade out</ button >
  
     < button class = "btn2" >Fade in</ button >
  
     < script >
         $(document).ready(function(){
             $(".btn1").click(function(){
                 $("h2").fadeOut(1000);
             });
              
             $(".btn2").click(function(){
                 $("h2").fadeIn(1000);
             });
         });
     </ script >
</ body >
  
</ html >

输出如下:

单击淡出按钮后

jQuery |效果fadeOut()方法2

之后点击淡入按钮

jQuery |效果fadeOut()方法3

范例3:创建带有警报消息的fadeIn和fadeOut效果。

<!DOCTYPE html>
< html >
  
< head > 
     < title >
         jQuery | fadeOut() Method
     </ title >
  
     < script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" >
     </ script >
</ head > 
  
< body style = "text-align:center;" >  
  
     < h1 style = "color:green;" >  
         lsbin
     </ h1 >  
      
     < h2 >jQuery | fadeOut() Method</ h2 >
  
     < button class = "btn1" >Fade out</ button >
  
     < button class = "btn2" >Fade in</ button >
      
     <!-- Script to create fadeIn and fadeOut effect -->
     < script >
         $(document).ready(function() {
             $(".btn1").click(function() {
                 $("h2").fadeOut(1000, function() {
                     alert("fadeOut() method is finished!");
                 });
             });
              
             $(".btn2").click(function() {
                 $("h2").fadeIn(1000, function(){
                     alert("fadeIn() method is finished!");
                 });
             });
         });
     </ script >
</ body >
  
</ html >

输出如下:

单击淡出按钮后

jQuery |效果fadeOut()方法4

之后点击淡入按钮

jQuery |效果fadeOut()方法5

木子山

发表评论

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