jQuery-4.动画篇---动画切换的比较(toggle与slideToggle以及fadeToggle的比较)
jQuery中toggle与slideToggle以及fadeToggle的比较
操作元素的显示和隐藏可以有几种方法。
例如:
- 改变样式display为none
- 设置位置高度为0
- 设置透明度为0
都能达到这个目的,并且针对这样的处理jQuery都提供了各自的方法。show/hide、sildeDown/sildeUp、fadeIn/fadeOut。除此之外,还引入了toggle、sildeToggle以及fadeToggle切换方法
- toggle:切换显示与隐藏效果
- sildeToggle:切换上下拉卷滚效果
- fadeToggle:切换淡入淡出效果
toggle与slideToggle细节区别:
- toggle:动态效果为从右至左。横向动作,toggle通过display来判断切换所有匹配元素的可见性
- slideToggle:动态效果从下至上。竖向动作,slideToggle 通过高度变化来切换所有匹配元素的可见性
fadeToggle方法
fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换。
元素是淡出显示的,fadeToggle() 会使用淡入效果显示它们。
元素是淡入显示的,fadeToggle() 会使用淡出效果显示它们。
注释:隐藏的元素不会被完全显示(不再影响页面的布局)
<p>测试文字淡入效果</p>
<p>专注分享</p>
动画切换:
<select id="animation">
<option value="1">toggle</option>
<option value="2">slideToggle</option>
<option value="3">fadeToggle</option>
</select>
<input id="btnShow" type="button" value="点击切换" />
<script type="text/javascript">
$("#btnShow").click(function() {
var v = $("#animation").val();
if (v == "1") {
$("p").toggle();
} else if (v == "2") {
$("p").slideToggle("slow");
} else if (v == "3") {
$("p").fadeToggle(1000, "linear");
}
});
</script>
jQuery-4.动画篇---动画切换的比较(toggle与slideToggle以及fadeToggle的比较)的更多相关文章
- jQuery-4.动画篇---动画基础隐藏和显示
jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元素的st ...
- jQuery中toggle与slideToggle以及fadeToggle的显示、隐藏方法的比较
1.区别 ①动画效果的比较: toggle:直接显示.隐藏,如果有[时间参数]且[匹配的元素有宽度属性],则动态效果为左上角-右下角拉卷效果,透明度0-1之间的变化:若有时间参数但是[匹配的元素没有宽 ...
- jQuery中toggle与slideToggle以及fadeToggle之间的不同
toggle()方法: 定义和用法 切换元素的可见状态.如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素. 语法: $(selector).toggle(speed,callback ...
- jQuery基础(动画篇 animate,显示隐藏,淡入淡出,下拉切换)
1.jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元 ...
- jquery基础学习之动画篇(四)
一,动画效果 hide() show() 隐藏与显示 hide(options) 隐藏 对应display:none,有参数就会变成动画, $(document).click(function () ...
- jQuery鼠标悬停内容动画切换效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 强大的JQuery(二)--动画效果
上篇博客我们讲过了jquery的基础知识--强大的JQuery(一)--基础篇,作为web开发人员,网页的动画效果是不可缺少的,本篇博客重点来说说jquery的动画效果的实现. 因为动画的效果不能截图 ...
- 深入学习jQuery的三种常见动画效果
× 目录 [1]显隐效果 [2]高度变化 [3]淡入淡出 前面的话 动画效果是jQuery吸引人的地方.通过jQuery的动画方法,能够轻松地为网页添加视觉效果,给用户一种全新的体验.jQuery动画 ...
- 第4章 jQuery的事件和动画(二)
二. jQuery中的动画 动画在前面几章案例中是回避不了的问题.此处结合一些简便的写法稍作系统的分析. 1. show()和hide()(1)介绍——不用过多的介绍了jQuery最基本的方法.本质是 ...
随机推荐
- 在.net core web项目中生成二维码
1.添加QRCoder包引用 2. public IActionResult MakeQrCode() { string url="https://www.baidu.com& ...
- YOLT:将YOLO用于卫星图像目标检测
之前作者用滑动窗口和HOG来进行船体监测,在开放水域和港湾取得了不错的成绩,但是对于不一致的复杂背景,这个方法的性能会下降.为了解决这个缺点,作者使用YOLO作为物体检测的流水线,这个方法相比于HOG ...
- Spring官方文档下载
Spring框架是目前最流行的java web开发框架,很多时候,我们需要去查看spring的官方文档,这里就简单介绍下如何下载其官方文档. 1.搜索到spring 官网并进入 2.点击DOCS 3. ...
- C#调用java包里的方法
用IKVM,步骤: 下载ikvmbin-7.2.4630.5.zip,解压,把bin目录所在路径加到环境变量path里 2.电脑开始->CMD,输入ikvmc –out:”输出dll文件的路径” ...
- css--nth-child的注意点
nth-child( n ) 里面的n可以是任何整数值. 不过要取第一位开始的元素DOM对象,那么n是从1开始的 如果n值小于0或者等于0,是不会匹配任何元素,(或者超过数量)切记切记!!!! 例子: ...
- JAVA实现简单的四则运算
GitHub 项目地址 https://github.com/745421831/-/tree/master PSP PSP2.1 Personal Software Process Stages 预 ...
- SQL循环表里的数据
select * into #t1 from Userinfodeclare @id varchar(2000);while (exists(select ProjectID from #t1))be ...
- openssl 检测链路完整
D:\openssl\bin>openssl s_client -connect www.xxxx.com:443
- css 技巧 (持续更新)
1.滚动条样式 /*自定义滚动条-----隐藏型*/ .scroll::-webkit-scrollbar-track{ border-radius: 1px; } .scroll::-w ...
- Windows浏览器无法连接VM虚拟机Centos并打开nginx页面
装的是centos6.7minimal版本,搜了下,需要关闭防火墙 于是 yum install iptables 然后关闭防火墙 service iptables stop 再打开浏览器,成功进入页 ...