Jquery源码分析－－-FX分析

核心提示： 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函数。
　　　　　 )
　　　 );
　　},