X-Git-Url: http://git.asbjorn.biz/?a=blobdiff_plain;f=fx%2Ffx.js;h=e8474a8c2a8f8afc4a35326a12fc9a819d8eb3ea;hb=8a97cd67ef48517e58b2eff9a644e4ced9f95053;hp=665f8950a236a5646fa11d2eee563db9a86ff993;hpb=268c82a903c06ce2711beed6d87ce551fa5356cb;p=jquery.git diff --git a/fx/fx.js b/fx/fx.js index 665f895..e8474a8 100644 --- a/fx/fx.js +++ b/fx/fx.js @@ -1,145 +1,165 @@ -$.speed = function(s,o) { - if ( o && o.constructor == Function ) { o = { onComplete: o }; } - o = o || {}; - var ss = {"crawl":1200,"xslow":850,"slow":600,"medium":400,"fast":200,"xfast":75,"normal":400}; - o.duration = typeof s == "number" ? s : ss[s] || 400; - - o.oldComplete = o.onComplete; - o.onComplete = function(){ - $.dequeue(this, 'fx'); - if ( o.oldComplete && o.oldComplete.constructor == Function ) { - $.apply( this, o.oldComplete ); - } - }; - - return o; +// overwrite the old show method +jQuery.prototype._show = jQuery.prototype.show; + +/** + * The effects module overloads the show method to now allow + * for a speed to the show operation. What actually happens is + * that the height, width, and opacity to the matched elements + * are changed dynamically. The only three current speeds are + * "slow", "normal", and "fast". For example: + * $("p").show("slow"); + * Note: You should not run the show method on things + * that are already shown. This can be circumvented by doing this: + * $("p:hidden").show("slow"); + */ +jQuery.prototype.show = function(speed,callback){ + return speed ? this.animate({ + height: "show", width: "show", opacity: "show" + }, speed, callback) : this._show(); }; -$.queue = {}; - -$.dequeue = function(elem,type){ - type = type || 'fx'; +// We're overwriting the old hide method +jQuery.prototype._hide = jQuery.prototype.hide; - if ( elem.$$queue && elem.$$queue[type] ) { - // Remove self - elem.$$queue[type].shift(); - // Get next function - var f = elem.$$queue[type][0]; - - if ( f ) { - $.apply( elem, f ); - } - } +/** + * The hide function behaves very similary to the show function, + * but is just the opposite. + * $("p:visible").hide("slow"); + */ +jQuery.prototype.hide = function(speed,callback){ + return speed ? this.animate({ + height: "hide", + width: "hide", + opacity: "hide" + }, speed, callback) : this._hide(); }; -$.fn.queue = function(type,fn){ - if ( !fn ) { - fn = type; - type = 'fx'; - } - - return this.each(function(){ - if ( !this.$$queue ) { - this.$$queue = {}; - } - - if ( !this.$$queue[type] ) { - this.$$queue[type] = []; - } - - this.$$queue[type].push( fn ); - - if ( this.$$queue[type].length == 1 ) { - $.apply(this,fn); - } - }); +/** + * This function increases the height and opacity for all matched + * elements. This is very similar to 'show', but does not change + * the width - creating a neat sliding effect. + * $("p:hidden").slideDown("slow"); + */ +jQuery.prototype.slideDown = function(speed,callback){ + return this.animate({height: "show"}, speed, callback); }; -$.fn._hide = $.fn.hide; - -$.fn.hide = function(a,o) { - o = $.speed(a,o); - return a ? this.queue(function(){ - new $.fx.FadeSize(this,o).hide(); - }) : this._hide(); +/** + * Just like slideDown, only it hides all matched elements. + * $("p:visible").slideUp("slow"); + */ +jQuery.prototype.slideUp = function(speed,callback){ + return this.animate({height: "hide"}, speed, callback); }; -$.fn._show = $.fn.show; +/** + * Adjusts the opacity of all matched elements from a hidden, + * to a fully visible, state. + * $("p:hidden").fadeIn("slow"); + */ +jQuery.prototype.fadeIn = function(speed,callback){ + return this.animate({opacity: "show"}, speed, callback); +}; -$.fn.show = function(a,o) { - o = $.speed(a,o); - return a ? this.queue(function(){ - new $.fx.FadeSize(this,o).show(); - }) : this._show(); +/** + * Same as fadeIn, but transitions from a visible, to a hidden state. + * $("p:visible").fadeOut("slow"); + */ +jQuery.prototype.fadeOut = function(speed,callback){ + return this.animate({opacity: "hide"}, speed, callback); }; -$.fn.slideDown = function(a,o) { - o = $.speed(a,o); - return this.queue(function(){ - new $.fx.Resize(this,o).show("height"); - }); +/** + * ... + */ +jQuery.prototype.fadeTo = function(speed,to,callback){ + return this.animate({opacity: to}, speed, callback); }; -$.fn.slideUp = function(a,o) { - o = $.speed(a,o); +/** + * + */ +jQuery.prototype.animate = function(prop,speed,callback) { return this.queue(function(){ - new $.fx.Resize(this,o).hide("height"); + var i = 0; + for ( var p in prop ) { + var e = new jQuery.fx( this, jQuery.speed(speed,callback,i++), p ); + if ( prop[p].constructor == Number ) + e.custom( e.cur(), prop[p] ); + else + e[ prop[p] ](); + } }); }; -$.fn.fadeOut = function(a,o) { - o = $.speed(a,o); - return a ? this.queue(function(){ - new $.fx.Opacity(this,o,1).hide(); - }) : this._hide(); -}; +jQuery.speed = function(s,o,i) { + o = o || {}; + + if ( o.constructor == Function ) + o = { complete: o }; + + var ss = {"slow":600,"fast":200}; + o.duration = (s && s.constructor == Number ? s : ss[s]) || 400; + + // Queueing + o.oldComplete = o.complete; + o.complete = function(){ + jQuery.dequeue(this, "fx"); + if ( o.oldComplete && o.oldComplete.constructor == Function ) + o.oldComplete.apply( this ); + }; + + if ( i > 0 ) + o.complete = null; -$.fn.fadeIn = function(a,o) { - o = $.speed(a,o); - return a ? this.queue(function(){ - new $.fx.Opacity(this,o,1).show(); - }) : this._show(); + return o; }; -$.fn.fadeTo = function(a,ev,o) { - o = $.speed(a,o); - return a ? this.queue(function(){ - ef = new $.fx.Opacity(this,o); - ef.custom(ef.cur(),parseFloat(ev)); - ef.show(); - }) : this._show(); +jQuery.queue = {}; + +jQuery.dequeue = function(elem,type){ + type = type || "fx"; + + if ( elem.queue && elem.queue[type] ) { + // Remove self + elem.queue[type].shift(); + + // Get next function + var f = elem.queue[type][0]; + + if ( f ) + f.apply( elem ); + } }; -$.fn.center = function(f) { +jQuery.prototype.queue = function(type,fn){ + if ( !fn ) { + fn = type; + type = "fx"; + } + return this.each(function(){ - if ( !f && this.nodeName == 'IMG' && - !this.offsetWidth && !this.offsetHeight ) { - var self = this; - setTimeout(function(){ - $(self).center(true); - }, 13); - } else { - var s = this.style; - var p = this.parentNode; - if ( $.css(p,"position") == 'static' ) { - p.style.position = 'relative'; - } - s.position = 'absolute'; - s.left = (($.css(p,"width") - $.css(this,"width"))/2) + "px"; - s.top = (($.css(p,"height") - $.css(this,"height"))/2) + "px"; - } - }); + if ( !this.queue ) + this.queue = {}; + + if ( !this.queue[type] ) + this.queue[type] = []; + + this.queue[type].push( fn ); + + if ( this.queue[type].length == 1 ) + fn.apply(this); + }); }; -$.setAuto = function(e,p) { +jQuery.setAuto = function(e,p) { var a = e.style[p]; - var o = $.css(e,p); - e.style[p] = 'auto'; - var n = $.css(e,p); - if ( o != n ) { + var o = jQuery.css(e,p); + e.style[p] = "auto"; + var n = jQuery.css(e,p); + if ( o != n ) e.style[p] = a; - } }; /* @@ -148,32 +168,42 @@ $.setAuto = function(e,p) { * people. You've been warned. */ -$.fx = function(el,op,ty){ +jQuery.fx = function( elem, options, prop ){ var z = this; // The users options z.o = { - duration: (op && op.duration) || 400, - onComplete: (op && op.onComplete) || op + duration: options.duration || 400, + complete: options.complete }; // The element - z.el = el; + z.el = elem; // The styles var y = z.el.style; // Simple function for setting a style value z.a = function(){ - z.el.style[ty] = z.now+'px'; + if ( prop == "opacity" ) { + if (z.now == 1) z.now = 0.9999; + if (window.ActiveXObject) + y.filter = "alpha(opacity=" + z.now*100 + ")"; + y.opacity = z.now; + } else + y[prop] = z.now+"px"; }; // Figure out the maximum number to run to - z.max = function(){return z.el["$$orig"+ty]||z.cur();}; + z.max = function(){ + return z.el["orig"+prop] || z.cur(); + }; // Get the current size - z.cur = function(){return $.css(z.el,ty);}; + z.cur = function(){ + return parseFloat( jQuery.css(z.el,prop) ); + }; // Start an animation from one number to another z.custom = function(from,to){ @@ -196,20 +226,15 @@ $.fx = function(el,op,ty){ // Simple 'hide' function z.hide = function(){ // Remember where we started, so that we can go back to it later - z.el["$$orig"+ty] = this.cur(); + z.el["orig"+prop] = this.cur(); // Begin the animation z.custom(z.cur(),0); }; - // Toggle between showing and hiding an element - z.toggle = function(){ - if ( z.cur() > 0 ) { - z.hide(); - } else { - z.show(); - } - }; + // IE has trouble with opacity if it doesn't have layout + if ( jQuery.browser == "msie" && !z.el.currentStyle.hasLayout ) + y.zoom = 1; // Remember the overflow of the element z.oldOverflow = y.overflow; @@ -234,21 +259,20 @@ $.fx = function(el,op,ty){ // If the element was shown, and not using a custom number, // set its height and/or width to auto - if ( (ty == "height" || ty == "width") && z.o.auto ) { - $.setAuto( z.el, ty ); - } + if ( (prop == "height" || prop == "width") && z.o.auto ) + jQuery.setAuto( z.el, prop ); // If a callback was provided, execute it - if( z.o.onComplete.constructor == Function ) { + if( z.o.complete && z.o.complete.constructor == Function ) { // Yes, this is a weird place for this, but it needs to be executed // only once per cluster of effects. // If the element is, effectively, hidden - hide it - if ( y.height == "0px" || y.width == "0px" ) { + if ( y.height == "0px" || y.width == "0px" ) y.display = "none"; - } - $.apply( z.el, z.o.onComplete ); + // Execute the complete function + z.o.complete.apply( z.el ); } } else { // Figure out where in the animation we are and set the number @@ -261,57 +285,3 @@ $.fx = function(el,op,ty){ }; }; - -$.fx.fn = ["show","hide","toggle"]; -$.fx.ty = ["Height","Width","Left","Top"]; - -(function(){ - for(var $i in $.fx.ty){(function(){ - var c = $.fx.ty[$i]; - $.fx[c] = function(a,b){ - return new $.fx(a,b,c.toLowerCase()); - }; - })();} -})(); - -$.fx.Opacity = function(a,b,sv){ - var o = new $.fx(a,b,"opacity"); - o.cur = function(){return parseFloat(o.el.style.opacity);}; - o.a = function() { - var e = o.el.style; - if (o.now == 1) { o.now = 0.9999; } - if (window.ActiveXObject) { - e.filter = "alpha(opacity=" + o.now*100 + ")"; - } - e.opacity = o.now; - }; - o.io = o.now = (sv || o.cur()); - o.a(); - return o; -}; - -$.fx.Resize = function(e,o){ - var z = this; - var h = new $.fx.Height(e,o); - if(o) { o.onComplete = null; } - var w = new $.fx.Width(e,o); - function c(a,b,d){return (!a||a==d||b==d);} - for(var i in $.fx.fn){(function(){ - var j = $.fx.fn[i]; - z[j] = function(a,b){ - if(c(a,b,"height")) { h[j](); } - if(c(a,b,"width")) { w[j](); } - }; - })();} -}; - -$.fx.FadeSize = function(e,o){ - var z = this; - var r = new $.fx.Resize(e,o); - if(o) { o.onComplete = null; } - var p = new $.fx.Opacity(e,o,1); - for(var i in $.fx.fn){(function(){ - var j = $.fx.fn[i]; - z[j] = function(a,b){p[j]();r[j](a,b);}; - })();} -};