jQuery中的自定义动画animate函数中的step基础的解释

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

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

参见jQuery的API文档

这次讲的就是第二种语法结构中,options众多类型中的一个:step

首先,jQuery API文档这样写:

Step Function

It accepts two arguments (now and fx), and this is set to the DOM element being animated.

//now:一个数字数组,包含第一个参数的几种特性的值;

//是当前动画正在改变的属性的实时值（每1次动画过程中，属性值的实时反馈呈现）

now: the numeric value of the property being animated at each step

//// fx: jQuery.fx 原型对象的一个引用,其中包含了多项属性,比如

// 执行动画的元素：elem;

// 动画正在改变的属性：prop;

// 正在改变属性的当前值：now;

// 正在改变属性的结束值：end;

// 正在改变属性的单位：unit;等

fx: a reference to the jQuery.fx prototype object, which contains a number of properties such as elem for the animated element, start and end for the first and last value of the animated property, respectively, and prop for the property being animated.

Note that the step function is called for each animated property on each animated element. For example, given two list items, the step function fires four times at each step of the animation:

示例：

$( "li" ).animate({
opacity: .5,
height: "50%"
}, {
step: function( now, fx ) {
var data = fx.elem.id + " " + fx.prop + ": " + now;
$( "body" ).append( "<div>" + data + "</div>" );
}
});

执行结果如下:

opacity: 1

height: 20

opacity: 0.9413708033732721

height: 23.51775179760368

opacity: 0.900105056331471

height: 25.99369662011174

opacity: 0.854664934384357

height: 28.72010393693858

opacity: 0.7813333083910761

height: 33.12000149653544

opacity: 0.7070177249301477

height: 37.57893650419114

opacity: 0.6471214103487228

height: 41.17271537907663

opacity: 0.6030536869268818

height: 43.8167787843871

opacity: 0.5500788353782273

height: 46.995269877306356

opacity: 0.5213482100503466

height: 48.7191073969792

opacity: 0.5044281873178278

height: 49.73430876093033

opacity: 0.5

height: 50

两个特性的值，轮流弹出