jQuery slideDown()方法用法示例

2021年3月13日17:01:51 发表评论 949 次浏览

slideDown()方法在jQuery中, 用于检查选定元素的可见性或显示隐藏的元素。它适用于两种类型的隐藏元素:

  • 使用jQuery方法隐藏的元素。
  • 使用显示隐藏的元素:CSS中没有。

语法如下:

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

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

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

下面的示例说明了jQuery中的slideDown()方法:

例子:本示例通过使用slideDown()方法显示隐藏的元素。

<!DOCTYPE html>
< html >
  
< head >
     < title >
         jQuery slideDown() Method
     </ title >
      
     < script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" >
     </ script >
      
     <!-- Script to illustrate slideDown() method -->
     < script >
         $(document).ready(function() {
             $(".geek").click(function() {
                 $("h1").slideDown();
             });
         });
     </ script >
</ head >
  
< body >
      
     <!-- hide element using CSS -->
     < h1 style = "display:none" >
         lsbin
     </ h1 >
  
     < button class = "geek" >
         Click on button to slide down
     </ button >
</ body >
  
</ html >

输出如下:

在单击按钮之前:

jQuery | slideDown()方法1

单击按钮后:

jQuery | slideDown()方法2

木子山

发表评论

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