实例

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

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

定义和用法

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

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

语法

$(selector).slideToggle(speed,callback)
参数 描述
speed

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

可能的值:

  • 毫秒 (比如 1500)
  • "slow"
  • "normal"
  • "fast"

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

callback

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

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

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

提示和注释

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

jQuery 效果 - slideToggle() 方法的更多相关文章

  1. jQuery 效果 - slideDown() 方法[菜单导航栏常用]

    实例 以滑动方式显示隐藏的 <p> 元素: $(".btn2").click(function(){ $("p").slideDown(); }); ...

  2. jQuery 效果 - animate() 方法

    http://www.w3school.com.cn/jquery/effect_animate.asp 实例 改变 "div" 元素的高度: $(".btn1" ...

  3. jQuery 效果 - fadeTo() 方法

    实例 使用淡出效果来隐藏一个 <p> 元素: $(".btn1").click(function(){ $("p").fadeTo(1000,0.4 ...

  4. jQuery 效果 - toggle() 方法切换元素的可见状态。

    定义和用法 toggle() 方法切换元素的可见状态. 如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素. 语法 $(selector).toggle(speed,callback, ...

  5. angularjs与jquery特效slidetoggle结合

    之前使用jquery的slidetoggle方法,可以轻易的实现元素的收缩展开:使用angularjs后,没有找到相关的方法,通过多方面查资料,自己写了个demo,展示slidetoggle的angu ...

  6. jQuery 效果函数

    jQuery 效果函数 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数( ...

  7. jQuery 效果函数,jquery文档操作,jQuery属性操作方法,jQuerycss操作函数,jQuery参考手册-事件,jQuery选择器

    jQuery 效果函数 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数( ...

  8. jQuery 效果方法

    jQuery 效果方法 下面的表格列出了所有用于创建动画效果的 jQuery 方法. 方法 描述 animate() 对被选元素应用"自定义"的动画 clearQueue() 对被 ...

  9. [学习笔记]jQuery实现一些动画效果的方法

    jQuery实现效果的方法 1,隐藏和显示:hide(),show(),toggle()  // [ˈtɑ:gl]切换 语法: $(selector).hide(speed,callback); $( ...

随机推荐

  1. IE8 通过Jquery动态修改html不显示的问题

    for (var i = 0; i < _priority_transf.length && i < xmlList.length; i++) { if (textCont ...

  2. Nginx发展现状及未来特性

    Nginx ("engine x")是一个高性能的HTTP和反向代理 服务器,也是一个IMAP/POP3/SMTP 代理服务器,其特点是占用内存少,并发能力强.到目前完为止,Ngi ...

  3. go语言基础之普通参数列表

    1.普通参数列表 (备注:只有一个参数) 示例1: package main //必须有一个main包 import "fmt" //有参无返回值函数的定义,普通参数列表 //定义 ...

  4. go语言基础之 if else的使用

    一.if_else 示例1: package main //必须有一个main包 import "fmt" func main() { a := 11 if a == 10 { f ...

  5. 8个使用JavaScript展示图片解决方案

    1. JonDesign’s SmoothGallery 2.0 SmoothGallery demo 2. (E)2 Photo Gallery (E)2 Photo Gallery demo 3. ...

  6. java学习笔记14--多线程编程基础1

    本文地址:http://www.cnblogs.com/archimedes/p/java-study-note14.html,转载请注明源地址. 多线程编程基础 多进程 一个独立程序的每一次运行称为 ...

  7. java学习笔记4--对象的初始化与回收

    本文地址:http://www.cnblogs.com/archimedes/p/java-study-note4.html,转载请注明源地址. 1.对象初始化和回收 对象初始化 系统在生成对象时,会 ...

  8. ES6 中 Symbol.split的用法

    class Split1 { constructor(value) { this.value = value; } [Symbol.split](string) { var index = strin ...

  9. x-pack 功能介绍及配置传输层安全性(TLS / SSL)

    x-pack 功能介绍及配置传输层安全性(TLS / SSL) 学习了:https://blog.csdn.net/wfs1994/article/details/80411047

  10. 退出app 退出应用程序

    退出app的两种方式1   创建activity的基类,让所有的activity都继承该基类,在基类中创建一个静态的activity列表,并在oncreate方法添加该activity,在退出时,遍历 ...