1jQuery中toggle与slideToggle以及fadeToggle的比较

操作元素的显示和隐藏可以有几种方法。
例如：

改变样式display为none
设置位置高度为0
设置透明度为0

都能达到这个目的，并且针对这样的处理jQuery都提供了各自的方法。show/hide、sildeDown/sildeUp、fadeIn/fadeOut。除此之外，还引入了toggle、sildeToggle以及fadeToggle切换方法

toggle、sildeToggle以及fadeToggle的区别：

toggle：切换显示与隐藏效果
sildeToggle：切换上下拉卷滚效果
fadeToggle：切换淡入淡出效果

当然细节上还是有更多的不同点:

toggle与slideToggle细节区别：

toggle：动态效果为从右至左。横向动作，toggle通过display来判断切换所有匹配元素的可见性
slideToggle：动态效果从下至上。竖向动作，slideToggle 通过高度变化来切换所有匹配元素的可见性

fadeToggle方法

fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换。
元素是淡出显示的，fadeToggle() 会使用淡入效果显示它们。
元素是淡入显示的，fadeToggle() 会使用淡出效果显示它们。
注释：隐藏的元素不会被完全显示（不再影响页面的布局）

转载于:https://www.cnblogs.com/jiajia-16/p/6160870.html

动画切换的比较 (jQuery)相关推荐

jQuery带音效旋转式动画切换幻灯片js特效
下载地址 jQuery带音效旋转式动画切换幻灯片特效代码是一款类似一个旋转按钮,通过点击按钮的相应区域可以使幻灯片以旋转的动画方式来切换图片,非常有创意. dd:
4款基于jquery的列表图标动画切换特效
网页中列表图标随处可见,特别是移动网页上,基本上的导航都采用了列表图标.今天给大家分享4款基于juqery的列表图标和关闭图标的动画切换特效.喜欢的网友赶紧收藏吧. 在线预览源码下载实现的代码 ...
iOS_20_微博自己定义可动画切换的导航控制器
终于效果: AnimatedNavigationController.h // // AnimatedNavigationController.h // 20_帅哥no微博 // // Created ...
用动画切换按钮的状态
用动画切换按钮的状态效果源码 https://github.com/YouXianMing/UI-Component-Collection // // BaseControl.h // BaseB ...
html做app的切换效果,Vue-router结合transition实现app动画切换效果实例分享
本文主要为大家带来一篇Vue-router结合transition实现app前进后退动画切换效果的实例.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧,希望能帮助到大家. ...
个人技术总结——Unity中角色动画制作及动画切换逻辑的实现
这个作业属于哪个课程软件工程实践2022春-F班这个作业要求在哪里软件工程实践总结&个人技术博客这个作业的目标课程回顾与总结+个人技术总结其他参考文献 <Unity2018教 ...
android开机动画切换
新建一个app,用于选择开机用那个动画布局文件: <?xml version="1.0" encoding="utf-8"?> <Linea ...
【Unity笔记】连招动画切换方式（一）
连招动画切换方式(一) 此方法可以实现的连击效果: 通过连续点击鼠标左键攻击1 接攻击2 接攻击3 结束在任意攻击动作中停止点击鼠标左键,则连击中断一.Animator中的设置先将一套连招 ...
编程实战——电影管理器之界面UI及动画切换
在前文"编程实战--电影管理器之利用MediaInfo获取高清视频文件的相关信息"中提到电影管理器的目的是方便播放影片,在想看影片时不需要在茫茫的文件夹下找寻. 我对电影管理器的想 ...

动画切换的比较 (jQuery)

1jQuery中toggle与slideToggle以及fadeToggle的比较

动画切换的比较 (jQuery)相关推荐

最新文章

热门文章