实例

通过使用滑动效果,在显示和隐藏状态之间切换 <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. Python学习 —— 阶段综合练习二

    综合之前的类的学习,做以下实例练习:(建议先不要看代码,自己先试着写:代码仅供参考,有多种实现方法) 1. Triangle  & Equilateral 1). 创建class Triang ...

  2. @ERR Unsupported CONFIG parameter: notify-keyspace-events

    Caused by: redis.clients.jedis.exceptions.JedisDataException: ERR Unsupported CONFIG parameter: noti ...

  3. Linux环境MySQL集群配置

    一.介绍 ======== 这篇文档旨在介绍如何安装配置基于2台服务器的MySQL集群.并且实现任意一台服务器出现问题或宕机时MySQL依然能够继续运行. 注意! 虽 然这是基于2台服务器的MySQL ...

  4. 几款很厉害的jQuery数字化签名插件(转)

    在浏览器中,我们有很多方式来绘制生成签名效果,并且有很多很棒很智能的jQuery插件.数字化签名是未来的发展方向,正是这个原因我们这里收集并且推荐了四款超棒的jQuery数字化签名插件,希望大家喜欢! ...

  5. Java 中 方法名或类名 变更 同时 更新 所有引用的 类名或方法名 的解决方案

    选中 类名,或属性名  Ctrl + 1  然后选择 理新当前文件,还是更新整个工作空间,然后修改对应的类名或方法名  回车即可. 如果.有SVN 版本在控制着,则 会提示,然后把对应的文件 锁定 再 ...

  6. python 下载安装setuptools及pip应用

    1.首先下载python安装程序,下载地址:https://www.python.org/download/releases/2.7.8/ 如下图: 因为我的机器是32位的就选择了Windows x8 ...

  7. Android下文件的压缩和解压(Zip格式)

    Zip文件结构 ZIP文件结构如下图所示, File Entry表示一个文件实体,一个压缩文件中有多个文件实体. 文件实体由一个头部和文件数据组,Central Directory由多个File he ...

  8. laravel 安装环境安了三天!!

    各种报错,各种升级,各种重装,重启!! 记录一下一些错误吧,,, 错误太复杂,,,, 原因:版本问题!.CPU虚拟化问题.win10问题.软件兼容性问题.还有就是各种不细心啥的         分割线 ...

  9. Creating a Fragment: constructor vs newInstance()

    from stack overflow and another chapter I recently grew tired of constantly having to know String ke ...

  10. C# 判断是否是节假日

    1.引用Newtonsoft.Json.dll 2. /// <summary>        /// 判断是不是节假日,节假日返回true         /// </summar ...