Jquery源码分析－－-FX分析

核心提示： 在custom中为fx对象动态地追加了几个属性，Start和end属性指的属性值变化的开始和结束位置，Jquery源码分析－－-FX分析(8)，这是属性值发生变化的范围，Now是在Start和end 范围的某一个点，之后调用update就可以改变样式的属性，这样一来，也就是当前要比属性设定

在custom中为fx对象动态地追加了几个属性。Start和end属性指的属性值变化的开始和结束位置。这是属性值发生变化的范围。Now是在Start和end 范围的某一个点，也就是当前要比属性设定值。这个值是根据时间的间隔比率再通过一定的算法来得出的。pos 和state一个是位置上的比率，一个是时间上比率，值在0~1之间。

Custom通过this.now = this.start;和this.update();来设起始位置的样式属性。

// 为元素设值，更新显示
　　update: function(){
　　　 //可以在显示之前进行自定义的显示操作
　　　 //这里可以是改变this.now或元素的其它属性。
　　　 //改变this.now是改变动画的轨迹，改变其它的属性会有更多的效果
　　　 if ( this.options.step )
　　　　　 this.options.step.call( this.elem, this.now, this );
　　　　 //根据this.now来改变/设值当前属性的值。也就改变了样式。
　　　 (jQuery.fx.step[this.prop] || jQuery.fx.step._default)( this );
　　
　　　 // 对于高度和宽度，肯定是要能看出效果的，故采用display=block。
　　　 if ( ( this.prop == "height" || this.prop == "width" )
&& this.elem.style )
　　　　　 this.elem.style.display = "block";
},

通过udate设定起始位置的样式属性之后，custom第二步就是采用setInterval

每隔13ms就执行一次当前的fx对象的step方法。该方法实现了动画结束的扫尾工作和动画过程中按一定的算法来计算this.now的值。因为这个值的改变，之后调用update就可以改变样式的属性。

这样一来，就实现了元素的某个属性的渐变过程。