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 ...
随机推荐
- 又拍云 API 使用的那些小事
又拍云提供了丰富的 API 调用,为了减少用户在初次接入时可能会遇到的坑”,本文将对又拍云常用的 API 使用方法做个简单的梳理,力求让业务接入变得更简单,更高效. 目前我们的 API 主要有四大类, ...
- gdb常用命令记录
gdb常用命令 最近在研究nginx源码,gdb用于调试非常方便,之前这篇有研究过如何使用gdb调试nginx:https://www.cnblogs.com/yjf512/archive/2012/ ...
- .net core使用RPC方式进行高效的HTTP服务访问
传统的HTTP接口调用是一件比较繁琐的事情,特别是在Post数据的时候:不仅要拼访问的URL还是把数据序列化成流的方式给Request进行提交,获取Respons后还要对流进行解码.在实际应用虽然可以 ...
- [linux]孤儿进程与僵尸进程
转载自:http://www.cnblogs.com/Anker/p/3271773.html 一.前言 之前在看<unix环境高级编程>第八章进程时候,提到孤儿进程和僵尸进程,一直对这两 ...
- XML就是这么简单
什么是XML? XML:extensiable markup language 被称作可扩展标记语言 XML简单的历史介绍: gml->sgml->html->xml gml(通用标 ...
- leetcode — construct-binary-tree-from-inorder-and-postorder-traversal
import java.util.ArrayList; import java.util.Arrays; import java.util.List; /** * Source : https://o ...
- 预测python数据分析师的工资
前两篇博客分别对拉勾中关于 python 数据分析有关的信息进行获取(https://www.cnblogs.com/lyuzt/p/10636501.html)和对获取的数据进行可视化分析(http ...
- [Luogu4705] 玩游戏
Description 给定两个长度分别为 \(n\) 和 \(m\) 的序列 \(a\) 和 \(b\).要从这两个序列中分别随机一个数,设为 \(a_x,b_y\),定义该次游戏的 \(k\) 次 ...
- C指针和数组的关系详解
1.C中数组和指针的关系 对于任意类型的数组arr,对于同类型的指针类型parr(确切一点,可以假设类型为int,即int arr[], *parr).它们之间有如下"内幕": 1 ...
- redis常见错误处理
--1]当内存不足引起 redis出错 先尝试下列语句,指定redis使用内存 redis-server.exe redis.windows.conf --maxheap 200mredis-ser ...