jQuery中动画函数animate的用法详解

您所在的位置:网站首页 jquery自定义的方法有哪些 jQuery中动画函数animate的用法详解

jQuery中动画函数animate的用法详解

2023-11-04 19:13| 来源: 网络整理| 查看: 265

定义和用法

animate()方法执行CSS属性集的自定义动画,该方法会将一个属性在指定或者默认的时间内从一个属性值变化到另一个属性值,由于属性值是逐渐变化的,所以就形成了所谓的动画效果。

方法参数 $(selector).animate(styles,speed,easing,callback) styles:

styles用来设置对象属性值的目标值,即需要将属性值变成什么状态或者大小。设置格式需要写成字典的格式,即一个属性对应一个属性值,如果同时设置多个属性值,需要用逗号连接。如果属性值是数字型的,可以不加单位,如{“width”:100} 但是如果要加上属性值单位,就要将属性值用引号包起来,如{“width”:”200px”} animate可以操作的属性很多,但是它不能操作颜色,如对象背景颜色,字体颜色等,如果想要操作颜色,需要导入官方提供的js文件才可以。下面给出下载链接,读者可以自己去下载然后导入到自己的程序中。https://github.com/jquery/jquery-color 下载好之后,可以像这样导入:

speed

speed就是速度、多快的意思,就是对象属性值从当前的状态转换到你设置的另一个状态的变化时间,支持数字类型和字符串两种类型,数字类型可以不用引号,直接写数字,单位是毫秒。字符串是固定值’fast’、’normail’、’slow’,如果不写,默认就是’normal’。

easing

easing是描述这个动画设一个怎样的运行过程,’linear’ 就是匀速的意思,即对象属性值从当前值变化到另一个值在固定的时间内是匀速变化的,而默认’swing’这个参数表示曲线形的运动模式,刚开始会慢慢运动,然后加速,最后减速

callback

callback是一个回调函数表示在动画执行完毕以后去调用的一个函数,用了这个回调函数,我们可以实现让动画往复运行,即在回调函数里面再把对象属性值设置为初始状态,再利用循环定时器,可以完成,下面会给大家附带一个动画代码,就是用这种思想实现的。

代码:

13-jQuery中的动画 .box { width: 200px; height: 200px; background-color: green; text-align: center; line-height: 200px; margin: 0 auto; } $(function () { var $div = $('.box'); // 动画函数 /* 第一个参数: {} 动画属性 css属性 第二个参数: 动画持续时间 毫秒 第三个参数: swing linear 默认不传就是用 swing 可以实现不同的过度效果 第四个参数: 动画执行完成后的回调函数 */ // 封装成函数 var oChange = function () { // 更改标签内文字 $div.html('life is short'); $div.animate({ 'width': '100%', 'background-color': 'red', 'font-size': '80px', 'color': 'pink', 'border-radius': '2000px', }, 2000, 'swing', function () { // 更改标签内文字 $div.html('you need python'); $div.animate({ 'width': 200, 'background-color': 'green', 'font-size': '16px', 'color': 'red', 'border-radius': '0px', }, 2000, 'swing'); }); } // 第一个参数要是一个函数 setInterval(oChange, 4000); }) life is short


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3