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