Jquery源码分析---FX分析
2010-09-14 13:39:01 来源:WEB开发网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);
},
更多精彩
赞助商链接