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

Jquery源码分析---FX分析

 2010-09-14 13:39:01 来源:WEB开发网   
核心提示: Slide和fade是通过分别改变height或opacity来完成效果的,其完成的工作任务在this.animate( props, speed, callback )上,Jquery源码分析---FX分析(2),show对于show和hide的,它们的效果更好一点,并在显示完成后可选地

Slide和fade是通过分别改变height或opacity来完成效果的。其完成的工作任务在this.animate( props, speed, callback )上。

show

对于show和hide的,它们的效果更好一点,其代码也复杂一点。

// show(speed,[callback])
  // 以优雅的动画隐藏所有匹配的元素,并在显示完成后可选地触发一个回调函数。
  // 可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。
  // 显示隐藏的匹配元素 show()
show: function(speed,callback){
return speed ?
this.animate({height: "show", width: "show", opacity: "show"
           }, speed, callback)
: this.filter(":hidden").each(function(){
   this.style.display = this.oldblock || "";
    if ( jQuery.css(this,"display") == "none" ) {
     var elem = jQuery("<" + this.tagName + " />").appendTo("body");
     this.style.display = elem.css("display");// 默认的显示的display
      if (this.style.display == "none")// 显式地设定该tag不显示           this.style.display = "block";
       elem.remove();// 上面这些的处理有没有必要呢?
       }
      }).end();// 回到前一个jQuery对象
  },
hide: function(speed,callback){
   return speed ?
    this.animate({height: "hide", width: "hide", opacity: "hide"
        }, speed, callback)
: this.filter(":visible").each(function(){
      this.oldblock = this.oldblock || jQuery.css(this,"display");
       this.style.display = "none";
      }).end();
  },
toggle: function( fn, fn2 ){
return jQuery.isFunction(fn) && jQuery.isFunction(fn2) ?
  this._toggle.apply( this, arguments ) :// 原来的toggle
    (fn ?  this.animate({height: "toggle", width: "toggle",
opacity: "toggle"}, fn, fn2)
   : this.each(function(){jQuery(this)[ jQuery(this).is(":hidden") ?
"show" : "hide" ]();}
      // 对每个元素都调用show,或hide函数。
      )
    );
  },

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

Tags:Jquery 源码 分析

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