toggle()方法:

定义和用法

切换元素的可见状态。如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。

语法:

$(selector).toggle(speed,callback,switch)

slideToggle()方法:

定义和用法

它通过使用滑动效果(高度变化)来切换元素的可见状态。如果被选元素是可见的,则隐藏这些元素,如果被选元素是隐藏的,则显示这些元素。

语法:

$(selector).slideToggle(speed,callback)

toggle()方法与slideToggle()方法区别在于,toggle方法的效果是从右到左,是一个横向的动作。它是通过display的状态来判断匹配元素的可见性。而slideToggle()方法的效果是从上到下,是一个竖向的动作,它是通过高度来判断匹配元素的可见性。

fadeToggle()方法:

定义和用法

fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换。

如果元素是淡出显示的,fadeToggle() 会使用淡入效果显示它们。

如果元素是淡入显示的,fadeToggle() 会使用淡出效果显示它们。

语法

$(selector).fadeToggle(speed,easing,callback)

这三个方法的参数中,参数均是可选的。第一个参数speed表示的切换两种状态的速度,可以用"slow"、"fast" 或毫秒。

参数callback表示的是动作完成后所执行函数的名称。

toggle()中的switch参数是可选的布尔值:True和False,表示toggle是否隐藏或显示所有的被选元素。若设置参数,则无法使用前两个参数。

fadeToggle()中的easing参数是可选的,表示的是在不同点上元素的速度

jQuery中toggle与slideToggle以及fadeToggle之间的不同的更多相关文章

  1. jQuery中toggle与slideToggle以及fadeToggle的显示、隐藏方法的比较

    1.区别 ①动画效果的比较: toggle:直接显示.隐藏,如果有[时间参数]且[匹配的元素有宽度属性],则动态效果为左上角-右下角拉卷效果,透明度0-1之间的变化:若有时间参数但是[匹配的元素没有宽 ...

  2. jQuery-4.动画篇---动画切换的比较(toggle与slideToggle以及fadeToggle的比较)

    jQuery中toggle与slideToggle以及fadeToggle的比较 操作元素的显示和隐藏可以有几种方法.例如: 改变样式display为none 设置位置高度为0 设置透明度为0 都能达 ...

  3. 关于jQuery中toggle()函数的使用

    今天遇到一个有趣的例子,将它记录下来. 一个一级菜单,里边有一个二级菜单,二级菜单是通过锚点来链接页面元素的.想要实现的效果是当点击锚点时,页面链接到相应锚点,同时二级菜单隐藏,再点击一级菜单时,继续 ...

  4. jQuery中,子页面与父页面之间的调用方法

    在jQuery中, 子页面查找父页面的元素 parent.$("#元素Id") 父页面调用子页面的元素 $("#子页面iframe的Id").contents( ...

  5. Jquery中toggle的用法详情

    jquery ----toggle([speed],[easing],[fn]) 用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的click事件 如果元素是可见的,切换为隐藏的:如果元素是隐藏 ...

  6. jquery 中toggle的2种用法

    一.在元素的click事件中绑定两个或两个以上的函数  toggle不像bind需要在后面添加"click"来绑定click触发事件,toggle本身就是click触发的(而且只能 ...

  7. jQuery中val()、text()、html()之间的差别

    一.括号里没有值时表示取值    val获取表单中的值: text获取对象中的文本内容,不包含html标签: html获取对象中的内容,包括html标签 <!DOCTYPE HTML> & ...

  8. jQuery中 :first、:first-child 和 :first-of-type 之间的不同

    <!DOCTYPE html><html><head><meta charset="utf-8"><script src=&q ...

  9. 关于jQuery中toggle参数callback函数提前执行问题

    通过 jQuery,您可以使用 toggle() 方法来切换 hide() 和 show() 方法. 显示被隐藏的元素,并隐藏已显示的元素: $(selector).toggle(speed,call ...

随机推荐

  1. 【Docker】(1)---Docker入门篇

    Docker入门篇 简单一句话: Docker 是一个便携的应用容器. 一.Docker的作用 网上铺天盖地的是这么说的: (1) Docker 容器的启动可以在秒级实现,这相比传统的虚拟机方式要快得 ...

  2. C++11 move语意

        C++11带来的move语义     C++11引入了move语义,stl中的容器基本都支持move语义,因此我们在使用stl中的容器的时候,就已经使用过move语义了,在网上看了不少关于mo ...

  3. asp.net core系列 23 EF模型配置(概述, 类型和属性的包含与排除)

    一.模型配置概述 EF使用一组约定基于实体类的定义来构建模型. 可指定其他配置以补充或替代约定的内容.本系列介绍的配置可应用于面向任何数据存储的模型,以及面向任意关系数据库时可应用的配置. 数据库提供 ...

  4. Python爬虫入门教程 7-100 蜂鸟网图片爬取之二

    蜂鸟网图片--简介 今天玩点新鲜的,使用一个新库 aiohttp ,利用它提高咱爬虫的爬取速度. 安装模块常规套路 pip install aiohttp 运行之后等待,安装完毕,想要深造,那么官方文 ...

  5. C#版 - PAT乙级(Basic Level)真题 之 1024.科学计数法转化为普通数字 - 题解

    版权声明: 本文为博主Bravo Yeung(知乎UserName同名)的原创文章,欲转载请先私信获博主允许,转载时请附上网址 http://blog.csdn.net/lzuacm. PAT Bas ...

  6. 代理自动配置文件PAC的使用方法

    我通常上网使用两个浏览器,safari用于一般上网:Chrome安装SwitchyOmega插件,在不同的代理中切换,来保证某些网站的上网速度. 但是这种方式到了手机上就有点懵,几乎所有的iPhone ...

  7. Android 9.0/P http 网络请求的问题

    Google表示,为保证用户数据和设备的安全,针对下一代 Android 系统(Android P) 的应用程序,将要求默认使用加密连接,这意味着 Android P 将禁止 App 使用所有未加密的 ...

  8. org.springframework.core.io.ClassPathResource类

    测试代码 package cn.edu.hdu.pichen.springexample; import java.io.BufferedReader; import java.io.IOExcept ...

  9. 【转载】ASP.NET Core 依赖注入

    本文转自:http://www.jessetalk.cn/2017/11/06/di-in-aspnetcore/ 为什么要写这个博客 DI在.NET Core里面被提到了一个非常重要的位置, 这篇文 ...

  10. RabbitMQ消息队列(三)-Centos7下安装RabbitMQ3.6.1

    如果你看过前两章对RabbitMQ已经有了一定了解,现在已经摩拳擦掌,来吧动手吧! 用什么系统 本文使用的是Centos7,为了保证对linux不太熟悉的伙伴也能轻松上手(避免折在安装的路上),下面是 ...