`
ticojj
  • 浏览: 156661 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

jQuery 效果 - slideToggle() 方法

 
阅读更多

 实例

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

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

定义和用法

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

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

语法

$(selector).slideToggle(speed,callback)
参数 描述
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="#" onclick="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);
	}

 

分享到:
评论

相关推荐

    jQueryAPI-090129.rar jQueryAPI-090129文档

    "$().fadeIn()"和"$().fadeOut()"实现元素的淡入淡出,"$().slideToggle()"完成滑动显示和隐藏,"$().animate()"允许自定义复杂的动画效果,包括改变CSS属性如宽度、高度、透明度等。 Ajax在jQuery中被封装得易于...

    最新版JQuery-jquery-3.2.1.min.js

    - **动画**:`fadeIn()`, `fadeOut()`, `slideToggle()`, `animate()`等提供平滑的动画效果。 - **Ajax**:`$.ajax()`, `$.get()`, `$.post()`, `getJSON()`等方法简化了与服务器的数据交互。 ### 5. 兼容性和性能...

    jquery-1.11.1.js 、jquery-1.11.1.min.js 【官方jquery包 js】

    jQuery广泛应用于网页开发,尤其在需要进行复杂的DOM操作、创建动态效果或简化Ajax请求的场合,它都能提供极大的便利。 总的来说,jQuery 1.11.1作为一款强大的JavaScript库,无论是在前端开发的日常工作中,还是...

    jQueryAPI-100214.zip_jQueryAPI-100214_javascript

    `.fadeIn()`, `.slideToggle()`, 和 `.animate()` 等方法可以让元素淡入淡出、滑动或自定义动画效果。 4. **Ajax交互**:jQuery 使用 `.ajax()`, `.get()`, `.post()` 等方法简化了异步数据请求。它可以轻松地处理...

    jQueryAPI-090129.zip

    jQuery的动画效果是其魅力所在,`fadeIn()`, `fadeOut()`, `slideToggle()`等方法用于实现淡入淡出、滑动显示等常见动画。`animate()`方法则可以自定义复杂的动画效果,包括改变CSS属性、高度、宽度等。 五、Ajax...

    jQueryAPI-100214.rar

    jQuery的动画功能强大,`.fadeIn()`, `.fadeOut()`, `.slideToggle()`等方法可实现平滑的过渡效果。`animate()`方法允许自定义动画,实现更复杂的效果。 六、AJAX操作 jQuery的`.ajax()`函数是进行异步数据请求的...

    最新jquery-2.1.1.js以及jquery-2.1.1.min.js文件

    5. **动画**:`.fadeIn()`, `.slideToggle()`, `.animate()`等方法让创建复杂的动画效果变得轻松。 6. **链式调用**:jQuery的返回值通常是jQuery对象,允许连续调用多个方法,提高代码的可读性。 7. **插件生态**...

    jquery-1.3.2.min-vsdoc jquery-1.4.3.min 等等

    - 动画效果:增强了动画性能,包括平滑的滑动效果(`.slideToggle()`)和其他CSS属性的动画。 - 选择器:增加了更多的CSS3选择器,如`:not()`, `:lt()`, `:gt()`, `:even`, `:odd`等,使得选择元素更加灵活。 - ...

    jquery-1.4.2.js和jquery-1.4.2-vsdoc.js

    - **动画效果**:`fadeIn()`、`slideToggle()`、`animate()`等方法让网页动态效果的实现变得简单。 - **AJAX操作**:`$.ajax()`函数支持异步数据请求,`$.get()`和`$.post()`简化了HTTP GET和POST操作。 2. **...

    Jquery下載,Jquery-3.5.1

    4. **动画**: jQuery 动画功能强大,包括 `fadeIn()`, `fadeOut()`, `slideToggle()` 等,使得创建复杂的视觉效果变得简单。 5. **Ajax**: jQuery 的 `$.ajax()` 方法简化了异步数据获取,支持 JSON, XML, HTML 等...

    jQuery-2.2.4.js

    动画效果是jQuery的亮点,$.fn.animate()方法允许开发者创建自定义动画,而$.fn.slideToggle()、$.fn.fadeIn()、$.fn.fadeOut()等预定义的动画函数则提供了常见的过渡效果。 最后,jQuery-2.2.4.js版本中还包含了...

    jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)

    在众多功能中,jQuery提供了丰富的方法来控制页面元素的显示和隐藏,其中slideToggle()方法就是用于实现元素在隐藏和显示状态之间切换的一种效果。 slideToggle()方法是一个内置在jQuery中的函数,主要通过滑动效果...

    jquery-3.3.1.js/min.js

    同时,`.fadeIn()`、`.fadeOut()`、`.slideToggle()`等预定义动画效果则提供了常见场景的便捷解决方案。 四、Ajax请求 jQuery的Ajax模块简化了异步数据交互,`.ajax()`是其核心,支持GET和POST等多种HTTP请求方式...

    jquery-3.2.0.js,jquery-3.2.0.min.js

    - **基本动画(Basic Animations)**:`.fadeIn()`, `.fadeOut()`, `.slideToggle()` 等方法创建平滑过渡效果。 - **自定义动画(Custom Animations)**:使用 `.animate()` 方法可以创建自定义动画,如改变宽高、...

    jquery1.7.2 API jquery-1.7.2-vsdoc 汉化中文版本

    jQuery对象可以执行多种方法,而DOM元素则不能。例如,`$('div')`会选取所有`&lt;div&gt;`元素,而`$('div').html()`则可以修改这些元素的HTML内容。 **2. 选择器** jQuery支持CSS选择器,包括ID选择器(#id)、类选择器...

    JQuery类库(jquery-1.2.1,jquery-1.2.6,jquery-1.3.2,jquery-1.4.1)

    4. **动画效果**:JQuery的`animate()`方法可以创建自定义动画效果,如改变元素的宽度、高度、透明度等。此外,还有`fadeIn()`, `fadeOut()`, `slideToggle()`等预定义的动画。 5. **Ajax交互**:JQuery封装了Ajax...

    jquery API -jQueryAPI-100214.chm

    jQuery 动画功能强大,$(selector).fadeIn() 和 $(selector).fadeOut() 分别实现淡入淡出效果,$(selector).slideToggle() 则实现滑动切换。$.animate() 方法可以自定义复杂的动画效果,通过指定CSS属性的变化来创建...

    jquery-2.0.3.js和jquery-2.0.3.min.js

    4. **动画效果**:`$.animate()`函数可以创建自定义的动画效果,配合`.fadeIn()`, `.fadeOut()`, `.slideToggle()`等预设动画,为网页增添动态魅力。 5. **Ajax交互**:`.ajax()`, `.get()`, `.post()`等方法让异步...

    jquery171-20121018-win

    `fadeIn()`, `fadeOut()`, `slideToggle()`等方法让开发者可以轻松创建各种过渡效果。1.7.1版本在此基础上进行了性能提升,同时增加了更精确的控制选项,如定时器和动画队列,让开发者可以更好地控制动画的执行顺序...

Global site tag (gtag.js) - Google Analytics