jQuery动画_动力节点节点Java学院整理


Posted in jQuery onJuly 04, 2017

用JavaScript实现动画,原理非常简单:我们只需要以固定的时间间隔(例如,0.1秒),每次把DOM元素的CSS样式修改一点(例如,高宽各增加10%),看起来就像动画了。

但是要用JavaScript手动实现动画效果,需要编写非常复杂的代码。如果想要把动画效果用函数封装起来便于复用,那考虑的事情就更多了。

使用jQuery实现动画,代码已经简单得不能再简化了:只需要一行代码!

让我们先来看看jQuery内置的几种动画样式:

show / hide

直接以无参数形式调用show()和hide(),会显示和隐藏DOM元素。但是,只要传递一个时间参数进去,就变成了动画:

var div = $('#test-show-hide');
div.hide(3000); // 在3秒钟内逐渐消失

时间以毫秒为单位,但也可以是'slow','fast'这些字符串:

var div = $('#test-show-hide');
div.show('slow'); // 在0.6秒钟内逐渐显示

toggle()方法则根据当前状态决定是show()还是hide()。

slideUp / slideDown

你可能已经看出来了,show()和hide()是从左上角逐渐展开或收缩的,而slideUp()和slideDown()则是在垂直方向逐渐展开或收缩的。

slideUp()把一个可见的DOM元素收起来,效果跟拉上窗帘似的,slideDown()相反,而slideToggle()则根据元素是否可见来决定下一步动作:

var div = $('#test-slide');
div.slideUp(3000); // 在3秒钟内逐渐向上消失

fadeIn / fadeOut

fadeIn()和fadeOut()的动画效果是淡入淡出,也就是通过不断设置DOM元素的opacity属性来实现,而fadeToggle()则根据元素是否可见来决定下一步动作:

var div = $('#test-fade');
div.fadeOut('slow'); // 在0.6秒内淡出

自定义动画

如果上述动画效果还不能满足你的要求,那就祭出最后大招:animate(),它可以实现任意动画效果,我们需要传入的参数就是DOM元素最终的CSS状态和时间,jQuery在时间段内不断调整CSS直到达到我们设定的值:

var div = $('#test-animate');
div.animate({
  opacity: 0.25,
  width: '256px',
  height: '256px'
}, 3000); // 在3秒钟内CSS过渡到设定值

animate()还可以再传入一个函数,当动画结束时,该函数将被调用:

var div = $('#test-animate');
div.animate({
  opacity: 0.25,
  width: '256px',
  height: '256px'
}, 3000, function () {
  console.log('动画已结束');
  // 恢复至初始状态:
  $(this).css('opacity', '1.0').css('width', '128px').css('height', '128px');
});

实际上这个回调函数参数对于基本动画也是适用的。

有了animate(),你就可以实现各种自定义动画效果了:

animate()

串行动画

jQuery的动画效果还可以串行执行,通过delay()方法还可以实现暂停,这样,我们可以实现更复杂的动画效果,而代码却相当简单:

var div = $('#test-animates');
// 动画效果:slideDown - 暂停 - 放大 - 暂停 - 缩小
div.slideDown(2000)
  .delay(1000)
  .animate({
    width: '256px',
    height: '256px'
  }, 2000)
  .delay(1000)
  .animate({
    width: '128px',
    height: '128px'
  }, 2000);
}
</script>

因为动画需要执行一段时间,所以jQuery必须不断返回新的Promise对象才能后续执行操作。简单地把动画封装在函数中是不够的。

为什么有的动画没有效果

你可能会遇到,有的动画如slideUp()根本没有效果。这是因为jQuery动画的原理是逐渐改变CSS的值,如height从100px逐渐变为0。但是很多不是block性质的DOM元素,对它们设置height根本就不起作用,所以动画也就没有效果。

此外,jQuery也没有实现对background-color的动画效果,用animate()设置background-color也没有效果。这种情况下可以使用CSS3的transition实现动画效果。

jQuery 相关文章推荐
jquery实现全选、全不选以及单选功能
Mar 23 jQuery
jQuery实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
jQuery异步提交表单实例
May 30 jQuery
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
jQuery中的for循环var与let的区别
Apr 21 jQuery
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
详解jQuery设置内容和属性
Apr 11 jQuery
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 jQuery
Jquery Fade用法详解
Nov 06 jQuery
jQuery实现点击关注和取消功能
Jul 03 #jQuery
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 #jQuery
jquery实现一个全局计时器(商城可用)
Jun 30 #jQuery
jQuery表单设置值的方法
Jun 30 #jQuery
jQuery开源组件BootstrapValidator使用详解
Jun 29 #jQuery
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 #jQuery
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 #jQuery
You might like
解析thinkphp基本配置 convention.php
2013/06/18 PHP
CI(CodeIgniter)框架中的增删改查操作
2014/06/10 PHP
注意!PHP 7中不要做的10件事
2016/09/18 PHP
PHP二维数组去重实例分析
2016/11/18 PHP
laravel5.1框架基础之Blade模板继承简单使用方法分析
2019/09/05 PHP
JavaScript面象对象设计
2008/04/28 Javascript
javascript html 静态页面传参数
2009/04/10 Javascript
js自动闭合html标签(自动补全html标记)
2012/10/04 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
2014/05/05 Javascript
Jquery操作js数组及对象示例代码
2014/05/11 Javascript
JavaScript中实现单体模式分享
2015/01/29 Javascript
轻量级javascript 框架Backbone使用指南
2015/07/24 Javascript
js限制文本框只能输入中文的方法
2015/08/11 Javascript
JS基于Mootools实现的个性菜单效果代码
2015/10/21 Javascript
前端面试知识点锦集(JavaScript篇)
2016/12/28 Javascript
JS出现失效的情况总结
2017/01/20 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
2017/05/13 jQuery
vue select二级联动第二级默认选中第一个option值的实例
2018/01/10 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
2018/05/03 Javascript
如何解决webpack-dev-server代理常切换问题
2019/01/09 Javascript
Vue项目中ESlint规范示例代码
2019/07/04 Javascript
Vue Element UI + OSS实现上传文件功能
2019/07/31 Javascript
详解vue中多个有顺序要求的异步操作处理
2019/10/29 Javascript
Node使用Nodemailer发送邮件的方法实现
2020/02/24 Javascript
Node.JS如何实现JWT原理
2020/09/18 Javascript
浅析Python中元祖、列表和字典的区别
2016/08/17 Python
Python基于辗转相除法求解最大公约数的方法示例
2018/04/04 Python
python中yield的用法详解——最简单,最清晰的解释
2019/04/04 Python
python面试题之列表声明实例分析
2019/07/08 Python
使用Python实现文字转语音并生成wav文件的例子
2019/08/08 Python
倩碧澳大利亚官网:Clinique澳大利亚
2019/07/22 全球购物
农村产权制度改革实施方案
2014/03/21 职场文书
彩妆大赛策划方案
2014/05/13 职场文书
七一党日活动总结
2014/07/08 职场文书
何玥事迹观后感
2015/06/16 职场文书
js实现自动锁屏功能
2021/06/02 Javascript