jQuery 滑动方法

通过 jQuery，您可以在元素上创建滑动效果。
jQuery 拥有以下滑动方法：

  • slideDown()
  • slideUp()
  • slideToggle()

1-1 jQuery slideDown() 方法 (用于向下滑动元素)

语法

  1. $(selector).slideDown(speed,callback);

隐藏与显示.gif

  1. <script src="jquery/jquery-3.6.0.js"></script>
  2.     <style>
  3.         .box{
  4.             width: 250px;
  5.             height: 200px;
  6.             margin: 10px auto;
  7.             background-color: lightblue;
  8.             text-align: center;
  9.         }
  10.         p{
  11.             border: 1px solid #eee;
  12.         }
  13.         .content{
  14.             display: none;   ---先隐藏
  15.         }
  16.     </style>
  1. <body>
  2.     <div class="box">
  3.         <div class="content">
  4.             <p>领先的 Web 技术教程</p>
  5.             <p>找到你所需要的所有网站建设教程</p>
  6.         </div>
  7.         <p class="click">
  8.             点击这里
  9.         </p>
  10.     </div>
  12.     <script>
  13.         $(document).ready(function(){
  14.             $(".click").click(function(){
  15.                 $(".content").slideDown("slow")
  16.             })
  17.         })
  18.     </script>
  19. </body>

1-2jQuery slideUp() 方法(用于向上滑动元素)

语法

  1. $(selector).slideUp(speed,callback);

隐藏与显示.gif

  1. <script>
  2.         $(document).ready(function(){
  3.             $(".click").click(function(){
  4.                 $(".content").slideUp("slow")
  5.             })
  6.         })
  7.     </script>

1-3 jQuery slideToggle() 方法 （可以在 slideDown() 与 slideUp() 方法之间进行切换）

语法

  1. $(selector).slideToggle(speed,callback);

隐藏与显示.gif

  1.   <script>
  2.         $(document).ready(function(){
  3.             $(".click").click(function(){
  4.                 $(".content").slideToggle("slow")
  5.             })
  6.         })
  7.     </script>