jQuery自定义动画animate函数的step属性

.animate是来实现自定义动画的,共有两种语法结构:

.animate( properties [, duration ] [, easing ] [, complete ] )
.animate( properties, options )

演示代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">li{width: 300px;height: 300px;background-color: red;}</style><script src="https://cdn.bootcss.com/jquery/1.10.1/jquery.js"></script></head><body><ul><li></li></ul><script type="text/javascript">$( "li" ).animate({opacity: .5,height: "50%"}, {step: function( now, fx ) {var data = fx.elem.id + " " + fx.prop + ": " + now;$( "body" ).append( "<div>" + data + "</div>" );}});</script></body>
</html>

验证结果


opacity: 1
height: 4285.714285714285
opacity: 0.9681240017681993
height: 4015.6790435506023
opacity: 0.9451076018345824
height: 3820.6972555415337
opacity: 0.9267766952966369
height: 3665.408290155795
opacity: 0.915327966330913
height: 3568.4212004890196
opacity: 0.8905208444630326
height: 3358.2694395225476
opacity: 0.8721553103742388
height: 3202.6871293131935
opacity: 0.8510858988821862
height: 3024.199114816234
opacity: 0.8197477765098073
height: 2758.720449575939
opacity: 0.8006968238391281
height: 2597.3316648086134
opacity: 0.7774335777727613
height: 2400.258737417821
opacity: 0.7519634752221778
height: 2184.4905829535915
opacity: 0.7264729216703714
height: 1968.549179293289
opacity: 0.701227419495968
height: 1754.6837108729856
opacity: 0.6746155100138762
height: 1529.242820546122
opacity: 0.652518078052953
height: 1342.046004077159
opacity: 0.6312859025323514
height: 1162.1791457383483
opacity: 0.6078595373164339
height: 963.7243661235052
opacity: 0.5891360338165553
height: 805.10954361739
opacity: 0.5664193726410787
height: 612.6669710879951
opacity: 0.5524612469060775
height: 494.4217059329126
opacity: 0.5389180186244962
height: 379.69121491894657
opacity: 0.5263638400404937
height: 273.3393877716112
opacity: 0.5154521660193789
height: 180.90192070702506
opacity: 0.5078542097178422
height: 116.53637660972072
opacity: 0.5027783753138739
height: 73.53680801610335
opacity: 0.5002775312595076
height: 52.35108624125678
opacity: 0.5
height: 50

jQuery自定义动画animate函数的step属性相关推荐

jquery自定义动画animate方法
示例效果: 示例代码: <!DOCTYPE html> <html><head><meta charset="utf-8">< ...
jQuery动画（jQuery预制动画，jQuery自定义动画，jQuery停止动画和延迟动画）
目录 jQuery预制动画显示隐藏动画上拉下拉动画(高度动画) 淡入淡出动画(透明度动画) jQuery自定义动画 jQuery停止动画和延迟动画等 jQuery预制动画 jquery的预制动画 ...
jQuery—自定义动画
演示视频 // Html部分<button>操作属性</button><button>累加属性</button><button>关键字< ...
自定义动画 animate || 案例：王者荣耀手风琴效果分析
自定义动画 animate <!DOCTYPE html> <html lang="en"><head><meta charset=&qu ...
jQuery自定义动画方法animate()
animate()方法执行CSS属性集的自定义动画,该方法会将一个属性在指定或者默认的时间内从一个属性值变化到另一个属性值,由于属性值是逐渐变化的,所以就形成了所谓的动画效果. 用法: $(selec ...
jQuery动画---自定义动画animate()
版权声明:本文为博主原创文章,转载请注明出处. https://blog.csdn.net/twilight_karl/article/details/73511662 同步动画 animate(参数 ...
jQuery 效果 - 动画 animate() 方法
我们先看一个demo <!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11. ...
源生的html属性js,使用源生JS自定义动画（支持多个属性）
通过自定义动画,可以很好提升对源生JavaScript知识的理解,主要涉及的技术: 1.setInterval 最小支持10毫秒,低于10毫秒按10秒计算,对于Chrome最少可以支持到4ms. 2. ...
自定义动画animate
开发工具与关键技术:VS,MVC 作者:陈梅撰写时间:2019年6月2 日所有代码来源与老师教学这次分享一个好玩的自定义动画效果,这次还是用jQuery做出来的小功能.这次我们先直接看最后已经布 ...
jQuery自定义动画
首先创建一个新的html,在body下面输入源代码:div标签代表的是颜色的面板,button标签代表的是按钮当我们输入好了源代码之后呢,那我们的源代码部分已经完成了,接下来剩下的就只有css样式和 ...

jQuery自定义动画animate函数的step属性

jQuery自定义动画animate函数的step属性相关推荐

最新文章

热门文章