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

Jquery源码分析---FX分析

 2010-09-14 13:39:01 来源:WEB开发网   
核心提示: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);
},

1 2 3 4 5 6  下一页

Tags:Jquery 源码 分析

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