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 ...
随机推荐
- [Abp 源码分析]七、仓储与 Entity Framework Core
0.简介 Abp 框架在其内部实现了仓储模式,并且支持 EF Core 与 Dapper 来进行数据库连接与管理,你可以很方便地通过注入通用仓储来操作你的数据,而不需要你自己来为每一个实体定义单独的仓 ...
- 【Spark篇】---SparkStream初始与应用
一.前述 SparkStreaming是流式处理框架,是Spark API的扩展,支持可扩展.高吞吐量.容错的实时数据流处理,实时数据的来源可以是:Kafka, Flume, Twitter, Zer ...
- Spring Boot 2.0 教程 | @ModelAttribute 注解
欢迎关注微信公众号: 小哈学Java 文章首发于个人网站: https://www.exception.site/springboot/spring-boot-model-attribute Spri ...
- Windows提权与开启远程连接
1.提权: 建立普通用户:net user 帐户 密码 /add 提权成管理员:net localgroup administrators 帐户 /add 更改用户密码:net user 帐户 密码 ...
- C#使用Windows Service
前言:Microsoft Windows 服务(即,以前的 NT 服务)使您能够创建在它们自己的 Windows 会话中可长时间运行的可执行应用程序.这些服务可以在计算机启动时自动启动,可以暂停和重新 ...
- plsql可视化文件夹解释
function:一般是存储函数或者方法 procedures:一般是存放存储过程 Table:一般是存放建的表 packages:包(头) package bodies:包体types:类型 typ ...
- 实战Kafka ACL机制
1.概述 在Kafka0.9版本之前,Kafka集群时没有安全机制的.Kafka Client应用可以通过连接Zookeeper地址,例如zk1:2181:zk2:2181,zk3:2181等.来获取 ...
- Asp.Net Core 程序部署到Linux(centos)生产环境(一):普通部署
运行环境 照例,先亮底 centos:7.2 cpu:1核 2G内存 1M带宽 辅助工具:xshell xftp 搭建.net core运行环境 .net core 的运行环境我单独写了一篇,请看我的 ...
- gcc编译基本用法~1
命令格式:gcc [选项] [文件名] 编译的四个阶段:-E:仅执行编译预处理: -c:仅执行编译操作,不进行连接操作:-S:将C代码转换为汇编代码: -o:指定生成的输出文件. Expiain : ...
- leetcode — palindrome-partitioning
import java.util.ArrayList; import java.util.Arrays; import java.util.List; /** * Source : https://o ...