实例

通过使用滑动效果,在显示和隐藏状态之间切换 <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. wamp网站Forbidden You don't have permission to access

    Forbidden You don't have permission to access   问题原因:apache的2.4的版本中 Require all denied 应该变成Require a ...

  2. java怎么删除List中的指定元素

    ArrayList al = new ArrayList(); al.add("a"); al.add("b"); //al.add("b" ...

  3. Java import javax.servlet 出错

    Error: The import javax.servlet cannot be resolved The import javax.servlet.http.HttpServletRequest ...

  4. Centos7 启动 python脚本

    假设文件夹\home\sks\python3_crawl下面有个test.py 文件 打开terminal终端:转到root模式 进入cd /hom/sks/python3_crawl 执行:pyth ...

  5. JavaScript中的递归函数问题

    学过其它编程语言的都应该会知道递归这个问题,递归函数是在一个函数通过名字调用自身的情况下后构成的. function fac(num){ if(num<=1){ return 1; }else{ ...

  6. iis服务器站点配置

    iis网站正常移动到一个新的服务器上 需要配置如下: 启用父路径 不启用父路径会报服务器500错误

  7. 【Project Euler 8】Largest product in a series

    题目要求是: The four adjacent digits in the 1000-digit number that have the greatest product are 9 × 9 × ...

  8. (C++)浅谈多态基类析构函数声明为虚函数

    主要内容: 1.C++类继承中的构造函数和析构函数 2.C++多态性中的静态绑定和动态绑定 3.C++多态性中析构函数声明为虚函数 1.C++类继承中的构造函数和析构函数 在C++的类继承中, 建立对 ...

  9. windows linux 下安装mysql 报1045 等错误

    曾经在windows 下安装mysql 没怎么出现过问题.而在linux下安装的时候出现了一些问题,昨天在windows 安装的时候也出现了1045 错误.就个人经历来看这个问题就是 root用户pa ...

  10. C#应用视频教程1.3 Socket通信客户端完善

    我们先把前面的代码封装成一个完整的类,因为跟网络相关的方法并不一定是建立socket的服务器和客户端,所以还是应该把两个分开,比如获取本机IP,修改本机IP,PING远程主机这些事情应该放在一个单独的 ...