jQuery-4.动画篇---动画基础隐藏和显示
jQuery中隐藏元素的hide方法
让页面上的元素不可见,一般可以通过设置css的display为none属性。但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元素的style属性,这里jQuery提供了一个快捷的方法.hide()来达到这个效果
$elem.hide()
提供参数:
.hide( options )
当提供hide方法一个参数时,.hide()就会成为一个动画方法。.hide()方法将会匹配元素的宽度,高度,以及不透明度,同时进行动画操作
快捷参数:
.hide("fast / slow")
这是一个动画设置的快捷方式,'fast' 和 'slow' 分别代表200和600毫秒的延时,就是元素会执行200/600毫秒的动画后再隐藏
注意:
jQuery在做hide操作的时候,是会保存本身的元素的原始属性值,再之后通过对应的方法还原的时候还是初始值。比如一个元素的display属性值为inline,那么隐藏再显示时,这个元素将再次显示inline。一旦透明度 达到0,display样式属性将被设置为none,这个元素将不再在页面中影响布局
<h2>hide</h2>
<div class="left">
<h4>测试一</h4>
<div id="a1">hide操作</div>
<button>直接hide</button>
<script type="text/javascript">
//点击buttom1 直接隐藏
$("button:first").click(function() {
$("#a1").hide()
});
</script>
<h4>测试一</h4>
<div id="a2">hide动画操作</div>
<button>hide带动画</button>
<script type="text/javascript">
//点击buttom2 执行动画隐藏
$("button:last").click(function() {
$("#a2").hide({
duration: 3000,
complete: function() {
alert('执行3000ms动画完毕')
}
})
});
</script>
jQuery中显示元素的show方法
css中有display:none属性,同时也有display:block,所以jQuery同样提供了与hide相反的show方法
方法的使用几乎与hide是一致的,hide是让元素显示到隐藏,show则是相反,让元素从隐藏到显示
看一段代码:使用上一致,结果相反
$('elem').hide(3000).show(3000)
让元素执行3秒的隐藏动画,然后执行3秒的显示动画。
show与hide方法是非常常用的,但是一般很少会基于这2个属性执行动画,大多情况下还是直接操作元素的显示与隐藏为主
注意事项:
- show与hide方法是修改的display属性,通过是visibility属性布局需要通过css方法单独设置
- 如果使用!important在你的样式中,比如display: none !important,如果你希望.show()方法正常工作,必须使用.css('display', 'block !important')重写样式
- 如果让show与hide成为一个动画,那么默认执行动画会改变元素的高度,高度,透明度
<script type="text/javascript">
//点击button
//执行3秒隐藏
//执行3秒显示
$("button").click(function() {
$("#a1").hide(3000).show(3000)
});
</script>
jQuery中显示与隐藏切换toggle方法
show与hide是一对互斥的方法。需要对元素进行显示隐藏的互斥切换,通常情况是需要先判断元素的display状态,然后调用其对应的处理方法。比如显示的元素,那么就要调用hide,反之亦然。 对于这样的操作行为,jQuery提供了一个便捷方法toggle用于切换显示或隐藏匹配元素
基本的操作:toggle();
这是最基本的操作,处理元素显示或者隐藏,因为不带参数,所以没有动画。通过改变CSS的display属性,匹配的元素将被立即显示或隐藏,没有动画。
- 如果元素是最初显示,它会被隐藏
- 如果隐藏的,它会显示出来
display属性将被储存并且需要的时候可以恢复。如果一个元素的display值为inline,然后是隐藏和显示,这个元素将再次显示inline
提供参数:.toggle( [duration ] [, complete ] )
同样的提供了时间、还有动画结束的回调。在参数对应的时间内,元素会发生显示/隐藏的改变,在改变的过程中会把元素的高、宽、不透明度进行一系列动画效果。这个元素其实就是show与hide的方法
直接定位:.toggle(display)
直接提供一个参数,指定要改变的元素的最终效果
其实就是确定是使用show还是hide方法
if ( display === true ) {$( "elem" ).show(); } else if ( display === false ) {$( "elem" ).hide(); }
toggle方法就是show与hide的相互切换的一个快捷方法
$("button:first").click(function() {
$(".left").toggle(3000)
});
</script>
<script type="text/javascript">
$("button:last").click(function() {
$(".right").toggle(3000)
});
</script>
转载于:https://www.cnblogs.com/oybb/p/7780197.html
jQuery-4.动画篇---动画基础隐藏和显示相关推荐
- android动画篇——动画加速器
android动画的加速器类Interpolator是用来描述动画运行时动画速率的快慢的类. AccelerateDecelerateInterpolator An interpolator wher ...
- 黄聪:PowerPoint设计编辑动画的时候图层隐藏和显示问题
只需要在"开始"工具栏下找到"编辑"选区,单击"选择",从弹出菜单中选择"选择窗格",就这么简单. 随后PPT窗口右侧会 ...
- JQuery怎么知道一个元素是否隐藏或显示How do you test if something is hidden in jQuery?
if ($(element).is(":visible")) { ... } 原帖http://stackoverflow.com/questions/178325/how-do ...
- jQuery效果-隐藏和显示
jQuery效果-隐藏和显示 使用jQuery能够轻易地实现各种动画效果,包括隐藏.显示.切换.滑动等 hide()方法和show()方法 通过jQuery,可以使用hide()和show()方法来隐 ...
- jQuery隐藏和显示
jQuery里有很多很炫酷的效果,比如隐藏.显示.渐入.渐出和动画等.这些方法运用组合可以做出很好看的jQuery动画. 一.隐藏和显示 jQuery效果里的通过jQuery,你可以使用hide()和 ...
- jQuery学习笔记系列(一)——入口函数,jQuery对象和DOM对象,jQuery选择器、样式操作、效果(显示隐藏、滑入滑出、淡入淡出、自定义动画、停止动画队列)
day01 - jQuery 学习目标: 能够说出什么是 jQuery 能够说出 jQuery 的优点 能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别 能够写出常用的 ...
- jQuery效果:隐藏、显示、切换、滑动、淡入淡出、动画
jQuery效果 隐藏.显示.切换.滑动.淡入淡出.以及动画1.隐藏与显示(改变:display:none;) hide()--隐藏 show()--显示toggle()方法:可以使用它来切换hide ...
- 虚幻引擎学习之路:动画模块之基础篇
原文链接:https://blog.uwa4d.com/archives/Study_Unreal4_Animation_1.html 在之前的微信文章推送中,我们陆续为大家详细介绍了Unreal 4 ...
- jQuery前端开发学习指南(18)——利用jQuery实现元素的隐藏、显示和切换及其动画效果
版权声明 本文原创作者:谷哥的小弟 作者博客地址:http://blog.csdn.net/lfdfhl 概述 在jQuery框架中可便捷地以动画形式隐藏和显示以及切换元素,常用方式有如下三种:默认方 ...
- 零基础编程——块语言编程游戏攻略之动画篇
动画1 动画2 动画3 动画4 动画5 动画6 动画7 动画8 动画9 动画10 自由发挥
最新文章
- JavaScript中函数四种调用模式
- 实战并发编程 - 03基于不可变模式解决并发问题_1
- 原生的html组件,如何创建HTML5与原生UI组件混合的移动应用程序
- Hibernate SqlQuery
- python中集合的元素可以是_python中的集合
- Abseil之Copies, Abbrv
- 情感分析[深度学习/机器学习]专业英语词汇分享
- spring中MessageSource的配置使用方法2--ReloadableResourceBundleMessageSource
- matlab 读取 Microsoft Excel 电子表格文件不推荐使用 xlsread
- opencv模板匹配matchTemplate
- Android 混淆规则
- 我了解的软件测试总结
- 《正在爆发的互联网革命》作者个人出资10000美金,面向全球征召六度分割理论实验对象!...
- 李飞飞CS231n课程-中文笔记(包括课后作业要求)翻译汇总
- 安装TypeScript
- googletest 学习笔记
- js操作设置css动画,使用 CSS3 和 JavaScript 制作链接反转 3D 动画 - 文章教程
- PHP和apache的三种连接示例------转自骏马金龙博客
- Python: 使用xlrd读取Excel文件
- 基于LSTM和词嵌入的tweet文本分类