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 UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
JQuery的加载和选择器用法简单示例
May 13 jQuery
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
Jquery让form表单异步提交代码实现
Nov 14 jQuery
JQuery样式与属性设置方法分析
Dec 07 jQuery
jQuery实现简单评论功能
Aug 19 jQuery
jQuery实现动态向上滚动
Dec 21 jQuery
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 jQuery
jQuery实现购物车全功能
Jan 11 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
从一个不错的留言本弄的mysql数据库操作类
2007/09/02 PHP
PHP中最容易忘记的一些知识点总结
2013/04/28 PHP
PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例
2020/08/17 PHP
js的闭包的一个示例说明
2008/11/18 Javascript
jQuery Validation插件remote验证方式的Bug解决
2010/07/01 Javascript
javascript字符串拼接的效率问题
2010/12/25 Javascript
jquery配合css简单实现返回顶部效果
2013/09/30 Javascript
Jquery中扩展方法extend使用技巧
2014/08/24 Javascript
jquery动态分页效果堪比时光网
2014/09/25 Javascript
AngularJS手动表单验证
2016/02/01 Javascript
原生js编写基于面向对象的分页组件
2016/12/05 Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
2017/11/20 Javascript
Vue-cli@3.0 插件系统简析
2018/09/05 Javascript
在Layui中实现开关按钮的效果实例
2019/09/29 Javascript
JS中循环遍历数组的四种方式总结
2021/01/23 Javascript
python中django框架通过正则搜索页面上email地址的方法
2015/03/21 Python
Python实现根据日期获取当天凌晨时间戳的方法示例
2019/04/09 Python
python+pygame实现坦克大战
2019/09/10 Python
Python解析多帧dicom数据详解
2020/01/13 Python
对python中arange()和linspace()的区别说明
2020/05/03 Python
python中关于数据类型的学习笔记
2020/07/19 Python
能否解释一下XSS cookie盗窃是什么意思
2012/06/02 面试题
小学生家长寄语
2014/04/02 职场文书
老师对学生的评语
2014/04/18 职场文书
小学语文课后反思精选
2014/04/25 职场文书
社区禁毒工作方案
2014/06/02 职场文书
个人四风问题对照检查材料
2014/09/26 职场文书
出纳工作检讨书
2014/10/18 职场文书
村党的群众路线教育实践活动总结材料
2014/10/31 职场文书
2015年入党决心书
2015/02/05 职场文书
简爱读书笔记
2015/06/26 职场文书
《学会生存》读后感3篇
2019/12/09 职场文书
解决Mysql的left join无效及使用的注意事项说明
2021/07/01 MySQL
基于HTML十秒做出淘宝页面
2021/10/24 HTML / CSS
在vue中import()语法不能传入变量的问题及解决
2022/04/01 Vue.js
小喇叭开始广播了! 四十多年前珍贵老照片
2022/05/09 无线电