实例

通过使用滑动效果,在显示和隐藏状态之间切换 <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. Kafka实战-Flume到Kafka (转)

    原文链接:Kafka实战-Flume到Kafka 1.概述 前面给大家介绍了整个Kafka项目的开发流程,今天给大家分享Kafka如何获取数据源,即Kafka生产数据.下面是今天要分享的目录: 数据来 ...

  2. MYSQL错误1130:ERROR 1130: Host 10.10.36.115 is not allowed to connect to this MySQL server

    解决远程连接mysql错误1130代码的方法  在用远程连接Mysql服务器的数据库,不管怎么弄都是连接不到,错误代码是1130,ERROR 1130: Host 10.10.36.115 is no ...

  3. echarts使用记录(三):x/y轴数据和刻度显示及坐标中网格显示、格式化x/y轴数据

    1.去掉坐标轴刻度线,刻度数据,坐标轴网格,以Y轴为例,同理X轴 xAxis: [{ type: 'category', axisTick: {//决定是否显示坐标刻度 alignWithLabel: ...

  4. vue-router路由元信息详解

    一.官方文档 路由元信息:定义路由的时候可以配置 meta 字段 const router = new VueRouter({ routes: [ { path: '/foo', component: ...

  5. hadoop实战--搭建开发环境及编写Hello World

    本文地址:http://www.cnblogs.com/archimedes/p/hadoop-helloworld.html,转载请注明源地址. 欢迎关注我的个人博客:www.wuyudong.co ...

  6. KineticJS教程(12)

    KineticJS教程(12) 作者: ysm  12.舞台 12.1.舞台的大小 舞台创建后还可以用舞台对象的setSize(width, height)方法来设置舞台的宽度与高度. <scr ...

  7. 算法笔记_042:求最小公倍数(Java)

    目录 1 问题描述 2 解决方案   1 问题描述 何为最小公倍数?能同时被数字m和数字n整除的最小整数.例如,24和60的最小公倍数等于120.下面请编写相关函数实现求取数字m和n的最小公倍数. 2 ...

  8. OFBiz:组件装入位置

    默认的,OFBiz会在framework.applications.specialpurpose.hot-deploy这几个目录寻找组件,在themes目录中寻找主题.OFBiz是通过framewor ...

  9. ubuntu下apache和mysql的命令

    // Apache //Task: Start Apache 2 Server /启动apache服务 # /etc/init.d/apache2 start //or $ sudo /etc/ini ...

  10. mysql优化一

    1.show global status      可以列出MySQL服务器运行各种状态值 2.show variables            查询MySQL服务器配置信息 一.慢查询 mysql ...