实例
通过使用滑动效果,在显示和隐藏状态之间切换 <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);
}
分享到:
相关推荐
"$().fadeIn()"和"$().fadeOut()"实现元素的淡入淡出,"$().slideToggle()"完成滑动显示和隐藏,"$().animate()"允许自定义复杂的动画效果,包括改变CSS属性如宽度、高度、透明度等。 Ajax在jQuery中被封装得易于...
- **动画**:`fadeIn()`, `fadeOut()`, `slideToggle()`, `animate()`等提供平滑的动画效果。 - **Ajax**:`$.ajax()`, `$.get()`, `$.post()`, `getJSON()`等方法简化了与服务器的数据交互。 ### 5. 兼容性和性能...
jQuery广泛应用于网页开发,尤其在需要进行复杂的DOM操作、创建动态效果或简化Ajax请求的场合,它都能提供极大的便利。 总的来说,jQuery 1.11.1作为一款强大的JavaScript库,无论是在前端开发的日常工作中,还是...
`.fadeIn()`, `.slideToggle()`, 和 `.animate()` 等方法可以让元素淡入淡出、滑动或自定义动画效果。 4. **Ajax交互**:jQuery 使用 `.ajax()`, `.get()`, `.post()` 等方法简化了异步数据请求。它可以轻松地处理...
jQuery的动画效果是其魅力所在,`fadeIn()`, `fadeOut()`, `slideToggle()`等方法用于实现淡入淡出、滑动显示等常见动画。`animate()`方法则可以自定义复杂的动画效果,包括改变CSS属性、高度、宽度等。 五、Ajax...
jQuery的动画功能强大,`.fadeIn()`, `.fadeOut()`, `.slideToggle()`等方法可实现平滑的过渡效果。`animate()`方法允许自定义动画,实现更复杂的效果。 六、AJAX操作 jQuery的`.ajax()`函数是进行异步数据请求的...
5. **动画**:`.fadeIn()`, `.slideToggle()`, `.animate()`等方法让创建复杂的动画效果变得轻松。 6. **链式调用**:jQuery的返回值通常是jQuery对象,允许连续调用多个方法,提高代码的可读性。 7. **插件生态**...
- 动画效果:增强了动画性能,包括平滑的滑动效果(`.slideToggle()`)和其他CSS属性的动画。 - 选择器:增加了更多的CSS3选择器,如`:not()`, `:lt()`, `:gt()`, `:even`, `:odd`等,使得选择元素更加灵活。 - ...
- **动画效果**:`fadeIn()`、`slideToggle()`、`animate()`等方法让网页动态效果的实现变得简单。 - **AJAX操作**:`$.ajax()`函数支持异步数据请求,`$.get()`和`$.post()`简化了HTTP GET和POST操作。 2. **...
4. **动画**: jQuery 动画功能强大,包括 `fadeIn()`, `fadeOut()`, `slideToggle()` 等,使得创建复杂的视觉效果变得简单。 5. **Ajax**: jQuery 的 `$.ajax()` 方法简化了异步数据获取,支持 JSON, XML, HTML 等...
动画效果是jQuery的亮点,$.fn.animate()方法允许开发者创建自定义动画,而$.fn.slideToggle()、$.fn.fadeIn()、$.fn.fadeOut()等预定义的动画函数则提供了常见的过渡效果。 最后,jQuery-2.2.4.js版本中还包含了...
在众多功能中,jQuery提供了丰富的方法来控制页面元素的显示和隐藏,其中slideToggle()方法就是用于实现元素在隐藏和显示状态之间切换的一种效果。 slideToggle()方法是一个内置在jQuery中的函数,主要通过滑动效果...
同时,`.fadeIn()`、`.fadeOut()`、`.slideToggle()`等预定义动画效果则提供了常见场景的便捷解决方案。 四、Ajax请求 jQuery的Ajax模块简化了异步数据交互,`.ajax()`是其核心,支持GET和POST等多种HTTP请求方式...
- **基本动画(Basic Animations)**:`.fadeIn()`, `.fadeOut()`, `.slideToggle()` 等方法创建平滑过渡效果。 - **自定义动画(Custom Animations)**:使用 `.animate()` 方法可以创建自定义动画,如改变宽高、...
jQuery对象可以执行多种方法,而DOM元素则不能。例如,`$('div')`会选取所有`<div>`元素,而`$('div').html()`则可以修改这些元素的HTML内容。 **2. 选择器** jQuery支持CSS选择器,包括ID选择器(#id)、类选择器...
4. **动画效果**:JQuery的`animate()`方法可以创建自定义动画效果,如改变元素的宽度、高度、透明度等。此外,还有`fadeIn()`, `fadeOut()`, `slideToggle()`等预定义的动画。 5. **Ajax交互**:JQuery封装了Ajax...
jQuery 动画功能强大,$(selector).fadeIn() 和 $(selector).fadeOut() 分别实现淡入淡出效果,$(selector).slideToggle() 则实现滑动切换。$.animate() 方法可以自定义复杂的动画效果,通过指定CSS属性的变化来创建...
4. **动画效果**:`$.animate()`函数可以创建自定义的动画效果,配合`.fadeIn()`, `.fadeOut()`, `.slideToggle()`等预设动画,为网页增添动态魅力。 5. **Ajax交互**:`.ajax()`, `.get()`, `.post()`等方法让异步...
`fadeIn()`, `fadeOut()`, `slideToggle()`等方法让开发者可以轻松创建各种过渡效果。1.7.1版本在此基础上进行了性能提升,同时增加了更精确的控制选项,如定时器和动画队列,让开发者可以更好地控制动画的执行顺序...