Jquery源码分析－－-FX分析

核心提示：8.1 FX的常用方法和前面分析的代码相比，FX是非常让人兴奋的，Jquery源码分析－－-FX分析，以前javaeye登陆的时候，对其登陆窗口的淡出淡入的特效总是想入非非，jQuery.each({slideDown: { height:"show" },slideUp: { height: &q

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);
},