jQuery中toggle与slideToggle以及fadeToggle之间的不同
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之间的不同的更多相关文章
- jQuery中toggle与slideToggle以及fadeToggle的显示、隐藏方法的比较
1.区别 ①动画效果的比较: toggle:直接显示.隐藏,如果有[时间参数]且[匹配的元素有宽度属性],则动态效果为左上角-右下角拉卷效果,透明度0-1之间的变化:若有时间参数但是[匹配的元素没有宽 ...
- jQuery-4.动画篇---动画切换的比较(toggle与slideToggle以及fadeToggle的比较)
jQuery中toggle与slideToggle以及fadeToggle的比较 操作元素的显示和隐藏可以有几种方法.例如: 改变样式display为none 设置位置高度为0 设置透明度为0 都能达 ...
- 关于jQuery中toggle()函数的使用
今天遇到一个有趣的例子,将它记录下来. 一个一级菜单,里边有一个二级菜单,二级菜单是通过锚点来链接页面元素的.想要实现的效果是当点击锚点时,页面链接到相应锚点,同时二级菜单隐藏,再点击一级菜单时,继续 ...
- jQuery中,子页面与父页面之间的调用方法
在jQuery中, 子页面查找父页面的元素 parent.$("#元素Id") 父页面调用子页面的元素 $("#子页面iframe的Id").contents( ...
- Jquery中toggle的用法详情
jquery ----toggle([speed],[easing],[fn]) 用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的click事件 如果元素是可见的,切换为隐藏的:如果元素是隐藏 ...
- jquery 中toggle的2种用法
一.在元素的click事件中绑定两个或两个以上的函数 toggle不像bind需要在后面添加"click"来绑定click触发事件,toggle本身就是click触发的(而且只能 ...
- jQuery中val()、text()、html()之间的差别
一.括号里没有值时表示取值 val获取表单中的值: text获取对象中的文本内容,不包含html标签: html获取对象中的内容,包括html标签 <!DOCTYPE HTML> & ...
- jQuery中 :first、:first-child 和 :first-of-type 之间的不同
<!DOCTYPE html><html><head><meta charset="utf-8"><script src=&q ...
- 关于jQuery中toggle参数callback函数提前执行问题
通过 jQuery,您可以使用 toggle() 方法来切换 hide() 和 show() 方法. 显示被隐藏的元素,并隐藏已显示的元素: $(selector).toggle(speed,call ...
随机推荐
- 【Docker】(1)---Docker入门篇
Docker入门篇 简单一句话: Docker 是一个便携的应用容器. 一.Docker的作用 网上铺天盖地的是这么说的: (1) Docker 容器的启动可以在秒级实现,这相比传统的虚拟机方式要快得 ...
- C++11 move语意
C++11带来的move语义 C++11引入了move语义,stl中的容器基本都支持move语义,因此我们在使用stl中的容器的时候,就已经使用过move语义了,在网上看了不少关于mo ...
- asp.net core系列 23 EF模型配置(概述, 类型和属性的包含与排除)
一.模型配置概述 EF使用一组约定基于实体类的定义来构建模型. 可指定其他配置以补充或替代约定的内容.本系列介绍的配置可应用于面向任何数据存储的模型,以及面向任意关系数据库时可应用的配置. 数据库提供 ...
- Python爬虫入门教程 7-100 蜂鸟网图片爬取之二
蜂鸟网图片--简介 今天玩点新鲜的,使用一个新库 aiohttp ,利用它提高咱爬虫的爬取速度. 安装模块常规套路 pip install aiohttp 运行之后等待,安装完毕,想要深造,那么官方文 ...
- C#版 - PAT乙级(Basic Level)真题 之 1024.科学计数法转化为普通数字 - 题解
版权声明: 本文为博主Bravo Yeung(知乎UserName同名)的原创文章,欲转载请先私信获博主允许,转载时请附上网址 http://blog.csdn.net/lzuacm. PAT Bas ...
- 代理自动配置文件PAC的使用方法
我通常上网使用两个浏览器,safari用于一般上网:Chrome安装SwitchyOmega插件,在不同的代理中切换,来保证某些网站的上网速度. 但是这种方式到了手机上就有点懵,几乎所有的iPhone ...
- Android 9.0/P http 网络请求的问题
Google表示,为保证用户数据和设备的安全,针对下一代 Android 系统(Android P) 的应用程序,将要求默认使用加密连接,这意味着 Android P 将禁止 App 使用所有未加密的 ...
- org.springframework.core.io.ClassPathResource类
测试代码 package cn.edu.hdu.pichen.springexample; import java.io.BufferedReader; import java.io.IOExcept ...
- 【转载】ASP.NET Core 依赖注入
本文转自:http://www.jessetalk.cn/2017/11/06/di-in-aspnetcore/ 为什么要写这个博客 DI在.NET Core里面被提到了一个非常重要的位置, 这篇文 ...
- RabbitMQ消息队列(三)-Centos7下安装RabbitMQ3.6.1
如果你看过前两章对RabbitMQ已经有了一定了解,现在已经摩拳擦掌,来吧动手吧! 用什么系统 本文使用的是Centos7,为了保证对linux不太熟悉的伙伴也能轻松上手(避免折在安装的路上),下面是 ...