jQuery 效果 - slideToggle() 方法

最新推荐文章于 2023-06-07 16:03:59 发布

ticojj

最新推荐文章于 2023-06-07 16:03:59 发布

阅读量91

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

本文链接：https://blog.youkuaiyun.com/ticojj/article/details/84014528

本文介绍如何使用jQuery的slideToggle()方法实现元素在显示和隐藏状态之间的滑动切换效果，包括定义、用法、语法、参数、提示和注释等详细信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实例

通过使用滑动效果，在显示和隐藏状态之间切换 <p> 元素：

$(".btn1").click(function(){
  $("p").slideToggle();
});

定义和用法

slideToggle() 方法通过使用滑动效果（高度变化）来切换元素的可见状态。

如果被选元素是可见的，则隐藏这些元素，如果被选元素是隐藏的，则显示这些元素。

语法

$(selector).slideToggle(speed,callback)

参数	描述
speed	可选。规定元素从隐藏到可见的速度（或者相反）。默认为 "normal"。可能的值：毫秒（比如 1500） "slow" "normal" "fast" 在设置速度的情况下，元素在切换的过程中，会逐渐地改变其高度（这样会创造滑动效果）。
callback	可选。toggle 函数执行完之后，要执行的函数。如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。除非设置了 speed 参数，否则不能设置该参数。

参数

描述

speed

可选。规定元素从隐藏到可见的速度（或者相反）。默认为 "normal"。

可能的值：

毫秒（比如 1500）
"slow"
"normal"
"fast"

在设置速度的情况下，元素在切换的过程中，会逐渐地改变其高度（这样会创造滑动效果）。

callback

可选。toggle 函数执行完之后，要执行的函数。

如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。

除非设置了 speed 参数，否则不能设置该参数。

提示和注释

提示：如果元素已经隐藏，则该效果不产生任何变化，除非规定了 callback 函数。

页面最初定义：

$(document).ready(function(){  
     
     $("#addPOP").hide(); 
     $("#addNoNormal").hide(); );

<td class="menu_center_long" nowrap>
					<a href="#" οnclick="slideToggle()" id="showProject">Show Project</a>
				</td>

function slideToggle(){
	    if($("#showProject").html()=="Show Project"){
	    	$("#showProject").html("Hide Project");
	    }
	    else if($("#showProject").html()=="Hide Project"){
	    	$("#showProject").html("Show Project");
	    }
		$("#addPOP").slideToggle(1000);		
		$("#addNoNormal").slideToggle(1000);
	}