WEB开发网
开发学院网页设计JavaScript Jquery源码分析---FX分析 阅读

Jquery源码分析---FX分析

 2010-09-14 13:39:01 来源:WEB开发网   
核心提示: 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;
}); },

上一页  1 2 3 4 5 6 7 8  下一页

Tags:Jquery 源码 分析

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接