JQuery slideToggle实例讲解

发布时间：2025-12-09 11:48:41 浏览次数：1

jQuery中的slideToggle()方法用于分别显示隐藏的元素或隐藏可见的元素,即,它在slideUp()和slideDown()方法之间进行切换。

隐藏元素时,将运行slideDown()。
当元素可见时,将运行slideUp()。

用法:

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

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

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

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

例:本示例显示或隐藏元素。

<!DOCTYPE html> <html>   <head>     <title>         jQuery slideToggle() Method     </title>           <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">     </script>           <!-- script to illustrates slideToggle() method -->    <script>         $(document).ready(function() {             $("button").click(function() {                 $("h1").slideToggle();             });         });     </script> </head>   <body>       <h1 style="color:green">         GeeksforGeeks     </h1>       <button>         Click on button to hide/show content     </button> </body>   </html>

输出:

在单击按钮之前:
单击按钮后:
双击按钮后:

slidetoggle

上一篇：紧急扩散下一篇：margin属性总结,你想知道的这里都有

知识问答

JQuery slideToggle实例讲解

综合百科

网站导航