Jquery源码分析－－-FX分析

核心提示： show和hide的函数如果没有指定speed的参数，它们就直接地show或hide元素，Jquery源码分析－－-FX分析(3)，没有动画的效果，如果给定的speed的参数，jQuery.fx.prototype if ( /toggle|show|hide/.test(val) )⑥

show和hide的函数如果没有指定speed的参数，它们就直接地show或hide元素。没有动画的效果。如果给定的speed的参数。它能根据这个speed的值动态去改变高度宽度透明度来达到动画的show或hide的效果。Toggle则是这两样的变换。

8.2 Fx的核心源码分析

上面的几个常用方式都是调用了this.animate。jquery对象的animate是大包大揽的函数。所有的FX的效果都可以从这里得到。因为FX特效就是通过连续（间隔很小的时间点）去改变元素的CSS的样式。达到视觉上的效果。Animate就是根据指定的参数（如speed,元素的属性的变化范围）来完成这样的功能。

Animate
/**
　　 * 用于创建自定义动画的函数。
　　 * 这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。
　　 * 注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left.
　　 * 而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。
　　 * 在 jQuery 1.2 中，你可以使用 em 和 % 单位。另外，在 jQuery 1.2 中，你可以通过在属性值前面指定 "+=" 或
　　 * "-=" 来让元素做相对运动。
　　 *
　　 * params (Options) : 一组包含作为动画属性和终值的样式属性和及其值的集合 。 duration (String,Number)
　　 * :(可选) 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
　　 * easing (String) : (可选) 要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
　　 * callback (Function) : (可选) 在动画完成时执行的函数
　　 */
animate: function( prop, speed, easing, callback ) {
　　var optall = jQuery.speed(speed, easing, callback); ①
// 执行each或queue方法
return this[ optall.queue === false ? "each" : "queue" ](function(){② var opt = jQuery.extend({}, optall), p,
　　hidden=this.nodeType==1&&jQuery(this).is(":hidden"),//元素节点且隐藏
　　self = this;// 当前的元素
　　for ( p in prop ) {　　　　　　　　　　　　　　　　　　　　③
　　　//如果是完成的状态，就直接调用complate函数
　　　if ( prop[p] == "hide" && hidden || prop[p] == "show" && !hidden )　　　　return opt.complete.call(this);
　　 if (( p == "height" || p == "width")&& this.style ){//style高宽度
　　　 opt.display = jQuery.css(this, "display");// 保存当前元素的display
　　　 opt.overflow = this.style.overflow;// 保证没有暗中进行的
　　　 }
　　 }
　　if ( opt.overflow != null )// 超出部分不见
　　　 this.style.overflow = "hidden";
opt.curAnim = jQuery.extend({}, prop);//clone传入的参数prop
　 jQuery.each( prop, function(name, val){　　　　　　　④
// 对当前元素的给定的属性进行变化的操作
　　　 var e = new jQuery.fx( self, opt, name );　　　 ⑤
// 传参的属性可以用toggle，show，hide，其它
　　　// 调用当前e.show,e.hide,e.val的方法，jQuery.fx.prototype
　　　　 if ( /toggle|show|hide/.test(val) )　　　　　⑥
　　　　　 e[ val == "toggle" ? hidden ? "show" : "hide" : val ]( prop );　　 else {　　　　　　　　　　　　　　　　　　　　　　 ⑦
　　　　　 var parts = al.toString().match(/^([+-]=)?([d+-.]+)(.*)$/),
　　　　　 start = e.cur(true) || 0;// 当前元素当前属性的值
　　　　　　// +=" 或 "-=" 来让元素做相对运动。
　　　　　 if ( parts ) {　　　　　　　　　　　　　　　　　　　 ⑧
　　　　　　　var end = parseFloat(parts[2]), unit = parts[3] || "px";　　　　　 if ( unit != "px" ) {// 计算开始的值=(end/cur)*start
　　　　　　　　　self.style[ name ] = (end || 1) + unit;
　　　　　　　　　start = ((end || 1) / e.cur(true)) * start;
　　　　　　　　　self.style[ name ] = start + unit;
　　　　　　　　　}
　　　　　 if( parts[1]) end = ((parts[1] == "-="? -1 : 1)* end)+ start;
　　　　　e.custom( start, end, unit );// 动画
　　　　}
　　　 //直接计算start和end的位置来动画。val是数值的end,start当前的属性值。
　　　 else　 e.custom( start, val, "" );// 动画　　⑨
　　　 }
　　});
　　/ For JS strict compliance
return true;
}); },