Jquery源码分析---FX分析

Jquery源码分析---FX分析2010-12-15prk（彭仁夔）8.1 FX的常用方法

和前面分析的代码相比，FX是非常让人兴奋的。以前javaeye登陆的时候，对其登陆窗口的淡出淡入的特效总是想入非非。Jquery 的core包中也提供了Fx的实现。

Fx的实质是连续有序改变dom元素的属性达到视觉上的效果，动态地变化起来。这些属性主要是高度，宽度，透明度和颜色（背景色和前景色）等。连续有序是和时间相关的，也就是先在某个时间点改变一下CSS的样式属性，下一个时间点再改变一下样式属性，达到渐变的过程的效果。

Jquery为我们提供了几种常用的FX的函数。

Slide是滑出的动作，对于slide，jquery提供了slideDown、slideUp、slideToggle三种方法。slideDown是元素向下面渐渐地滑出，最后全部可见。slideUp是元素向上面渐渐地钻进去，最后不见。slideToggle则是这两者之间的转换了。

Fade是淡变的动作。对于Fade，jquery提供了fadeIn、fadeOut两个方法。fadeIn是从无到有渐渐地显示出整个元素。fadeOut相反，它从有到无渐渐地消失这个元素，fade还提供了一个fadeTo用来改变透明性渐变到一个指定的值，而不是消失。

Jquery还提供一组更强大的方法。Show、hide、toggle采用一种更为优美的方式显示元素。Show是元素的宽度渐渐变成，同时高度也渐渐变大，同时透明度也渐渐从无到不透明。这种的效果是元素从一个点渐渐变大，最终完全地显示出来。Hide刚是相反，它是渐渐透明同时宽高逐渐变小，最后消失。Toggle是两者之间的转换。

jQuery.each（{
  slideDown: { height:"show" },
  slideUp: { height: "hide" },
  slideToggle: { height: "toggle" },
  fadeIn: { opacity: "show" },
  fadeOut: { opacity: "hide" }
}, function（ name, props ）{
   jQuery.fn[ name ] = function（ speed, callback ）{
    return this.animate（ props, speed, callback ）;
  };
}）;
   // 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，
//并 在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度。
  fadeTo: function（speed,to,callback）{
    return this.animate（{opacity: to}, speed, callback）;
},

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函数。
      ）
    ）;
   },

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