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

Jquery源码分析---FX分析

 2010-09-14 13:39:01 来源:WEB开发网   
核心提示: 先看一下show或hidden:show: function(){// 保存当前的,以被修改之后能得到初始的值this.options.orig[this.prop]=jQuery.attr(this.elem.style,this.prop);this.options.show = tr

先看一下show或hidden:

show: function(){
// 保存当前的,以被修改之后能得到初始的值
this.options.orig[this.prop]=jQuery.attr(this.elem.style,this.prop);
this.options.show = true;//标明是进行show操作
this.custom(0, this.cur());
//让最开始时以1px的宽或高度来显示。防止内容flash
if ( this.prop == "width" || this.prop == "height" )
    this.elem.style[this.prop] = "1px";   
jQuery(this.elem).show();
  },
hide: function(){
// 保存当前的,以被修改之后能得到初始的值
this.options.orig[this.prop]=jQuery.attr(this.elem.style,this.prop);
this.options.hide = true;//标识是进行hide操作
this.custom(this.cur(), 0);  },

show和hide是在指定元素的属性为show或hide的时候调用的,如height: "show", width: "show", opacity: "show"。它们都是先保存原始的改悔。之后调用custom来完成动画。和⑨处是一样的。

也就是说完成动画的工作在custom中:

// 开动一个动画
  custom: function(from, to, unit){
    this.startTime = now();//动画开始的时候
    this.start = from;//位置开始点
    this.end = to;//位置结果点
    this.unit = unit || this.unit || "px";
    this.now = this.start;//位置当前点
    //state是时间间隔在总的duration的比率
    //pos是按一定算法把时间上的比率折算到位置上的比率
    this.pos = this.state = 0;
    //根据this.now位置当前点的值来设定元素的属性显示出来
    this.update();
  
    var self = this;
    function t(gotoEnd){
      return self.step(gotoEnd);// 调用step(gotoEnd)//本对象的
    }
    t.elem = this.elem;//删除的时候做判断用
    //timers栈是公共的,不同的元素的不同的属性step都是放在这里面。
    jQuery.timers.push(t);
    if ( jQuery.timerId == null ) {
      jQuery.timerId = setInterval(function(){
       var timers = jQuery.timers;
      //倒是觉得这里会有同步冲突的问题。Ext.observable中就有解决方法
       for ( var i = 0; i < timers.length; i++ )
       //当一个属性的动画完成,或强迫完成的时候,把step从数组中删除.
       //同时把i的位置不改变。继续下一个。
       if ( !timers[i]() ) timers.splice(i--, 1);          
        //说明还有属性的动画没有完成,step还在timers中。
        //那么就不clearInterval,13ms之后再继续。直到数组
        //中所有的step都被删除。
       if ( !timers.length ) {
         clearInterval( jQuery.timerId );
         jQuery.timerId = null;
       }
      }, 13);
    }
},

上一页  2 3 4 5 6 7 8 9 10  下一页

Tags:Jquery 源码 分析

编辑录入:爽爽 [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
赞助商链接