前端编程提高之旅(十六)----jquery中的动画
来源:互联网 发布:异步网络框架 编辑:程序博客网 时间:2024/05/16 18:43
上一篇文章对jquery中的事件做了总结,这篇文章主要对jquery中的动画做一下总结归类。最近微信端分享中,有很多页面交互及动画做的非常受欢迎,非常符合移动端体验。看似花哨的动画从本质上都脱离不了编写动画的基本方法。乐帝将jquery动画部分内容,做了一个简单的归类。
如下图:
如上图所示,无论多复杂的动画,从实现上都采用这些最底层的动画方法。本篇将从动画方法和与动画状态有关的方法讲起。
一、动画方法
1.同时改变高、宽、不透明度方法
这里涉及show和hide方法,动画的结果是设置元素样式display属性是否为none,然而既然说是动画,就要照顾到中间状态。这里动画方法参数都可以设置持续时间与执行完的回调方法。那么可以设置一个比较大的时间,来看看show方法与hide方法动画执行中是如何过渡的。
典型用法如下例:
HTML结构:
<div id="panel"><h5 class="head">什么是jQuery?</h5><div class="content">jQuery是继Prototype之后又一个优秀的JavaScript库,它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。</div></div>
jquery代码:
$("#panel h5.head").click(function(){ if($(this).next().is(':visible')){ $(this).next().hide(10000); }else{ $(this).next().show(10000); } })
由于设置动画时间较长,可以很明显看出,动画过程中宽度、高度、透明度这三组值同时有一个变化的过程。
2.只改变元素不透明度的方法
这里涉及一组方法fadeIn方法与fadeOut方法,顾名思义,淡入与淡出效果,主要通过改变元素透明度实现。仍然延续上例,将判断语句中方法改成fadeIn与fadeOut方法。
$("#panel h5.head").click(function(){ if($(this).next().is(':visible')){ $(this).next().fadeOut(10000); }else{ $(this).next().fadeIn(10000); } })
通过观察chrome控制台元素样式变化,会发现透明度在快速变化,最后状态为display为none或block。
3.只改变元素高度的方法
slideUp方法与slideDown方法,这一组方法在动画执行过程中是通过改变元素高度来实现的。仍然延续上例,只将方法做修改。
$("#panel h5.head").click(function(){ if($(this).next().is(':visible')){ $(this).next().slideUp(10000); }else{ $(this).next().slideDown(10000); } })
通过在浏览器控制台观察,很容易验证这组方法确实改变元素高度来过渡动画,但乐帝也发现上下padding也连带有个减小的过程。
4.自定义动画
animate方法与以上三组方法的区别在于,上述三组方法都脱身与animate方法,animate方法是动画的通用方法。animate方法可以有三个参数,第一个参数为动画执行要改变的样式终点值,第二个参数为动画执行时间,第三个为动画执行完的回调。
不难看出,上述三组方法与animate方法的区别仅在于,三组方法动画执行要改变样式终点值形式已经定义好了,而animate仍需要指定。这看似麻烦的指定同时也给我们设置动画提供了极大的自由度。
$(this).animate({width: "0px"}, 3000,function(){console.log("animation is done")});
这里自定义动画还可以设置累加/累减的方法:
$(this).animate({width: "-=50px"}, 3000,function(){console.log("animation is done")});
5.多重动画
多重动画只是在以上四组方法的基础上,进行业务上的排列组合构成。
6.状态切换动画
思维导图提到的其中三种方法:toggle方法、slideToggle方法、fadeToggle方法。这三种方法都可以切换可见性。fadeTo方法则是设置透明度。
以slideToggle使用为例:
$(this).next().slideToggle();
二、与动画状态有关的方法
1.判断动画状态的方法
这里并没有独立的方法,而是通过is方法判断。
$('#mover').is(":animated")
2.延迟动画
实现动画延迟的方法为delay方法,参数传入需要延迟的时间。
典型用法:
$(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000) .delay(1000) .animate({top: "200px" , width :"200px"}, 3000 ) .delay(2000) .fadeOut("slow");
3.停止动画
stop方法用于停止动画,可以传入两个布尔值做参数。第一个参数代表是否要清空未执行的动画队列,第二个参数代表是否直接将当前正在执行的动画跳转到末状态。
常见场景当光标移入、移出时动画还没有结束,此时可以停止动画,执行此时逻辑添加的动画:
<pre name="code" class="javascript">$("#panel").hover(function() { $(this).stop().animate({height : "150",width : "300"} , 200 ); },function() { $(this).stop().animate({height : "22",width : "60" } , 300 ); });
- 前端编程提高之旅(十六)----jquery中的动画
- 前端编程提高之旅(十三)----jquery选择器
- 前端编程提高之旅(十四)----jquery DOM操作
- 前端编程提高之旅(十五)----jquery事件
- 前端编程提高之旅(二)----网站常见特效的jquery实现
- 前端编程提高之旅(十一)----jquery代码的组织
- 前端编程提高之旅(十七)----jquery中表单、表格和ajax
- 前端编程提高之旅(十七)----jquery中表单、表格和ajax
- web前端之锋利的jQuery五:jQuery中的动画
- 前端编程提高之旅(一)----插件
- 前端编程提高之旅(四)----backbone初体验
- 前端编程提高之旅(六)----backbone实现todoMVC
- 前端编程提高之旅(七)----marionette实现todoMVC
- 前端编程提高之旅(九)----延迟对象
- 前端之jquery动画应用
- 前端编程提高之旅(三)----浏览器兼容之IE6
- 前端编程提高之旅(五)----写给大家看的css书
- 前端编程提高之旅(八)----D3.js数据可视化data join解析
- 用swt做JAVA界面
- java 方法中可变参数的使用
- LeetCode[Linked List]: Intersection of Two Linked Lists
- Android学习之——入门启蒙
- “流支付”掀起互联网支付创新浪潮,SAK支付白皮书揭秘
- 前端编程提高之旅(十六)----jquery中的动画
- hdu2059——龟兔赛跑
- Poj2488【深搜】
- 邻接表 数据结构 -更新中。。。。。
- Github 博客平台搭建
- IP数据报的分片与重组分析
- 邻接表的基本操作(无向网)
- Android图片相关学习
- Adapter的arrayladapter和simpleadapter使用