实例

通过使用滑动效果,在显示和隐藏状态之间切换 <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. cocos2d-x v3.0各个环境下创建项目以及编译、执行官方DEMO

    摘自:https://github.com/cocos2d/cocos2d-x/ 怎样创建一个新项目 How to start a new game Download the code from co ...

  2. JS 与Flex交互:html中的js 与flex中的actionScript通信

    Flex与JavaScript交互的问题,这里和大家分享一下,主要包括Flex调用JavaScript中的函数和JavaScript调用Flex中的函数两大部分内容. Flex 与JavaScript ...

  3. C#好书盘点

    C#是学习asp.net和.NET Winform程序的基础,所以一定要学好.从00年C#出道到现在,7年过去了,C#的书出了许多,有不少好书. 1.<21天学通C# > 作者:作者:(美 ...

  4. uva 10518 - How Many Calls?(矩阵快速幂)

    题目链接:uva 10518 - How Many Calls? 公式f(n) = 2 * F(n) - 1, F(n)用矩阵快速幂求. #include <stdio.h> #inclu ...

  5. ambari 大数据安装利器

    https://www.ibm.com/developerworks/cn/opensource/os-cn-bigdata-ambari/

  6. [Functional Programming] Monad

    Before we introduce what is Monad, first let's recap what is a pointed functor: A pointed functor is ...

  7. (剑指Offer)面试题42:翻转单词顺序

    题目: 输入一个英文句子,翻转句子中单词的顺序,但单词内字符的顺序不变.为简单起见,标点符号和普通字母一样处理. 例如输入字符串“I am a student.”,则输出"student. ...

  8. Python Web Scraper - Simple Url Request

    from urllib.request import urlopen html = urlopen("http://www.baidu.com") print(html.read( ...

  9. GCC高级测试功能扩展——程序性能测试工具gprof、程序覆盖测试工具gcov

    gprof是GNU组织下的一个比较有用的性能测试功能: 主要功能:   找出应用程序中消耗CPU时间最多的函数: 产生程序运行时的函数调用关系.调用次数 基本原理:   首先用户要使用gprof工具, ...

  10. 算法笔记_033:十六进制转八进制(Java)

    目录 1 问题描述 2 解决方案 2.1 注意问题 2.2 具体实现代码   1 问题描述 具体问题描述 给定n个十六进制正整数,输出它们对应的八进制数. 输入格式 输入的第一行为一个正整数n (1& ...