Skip to content
Permalink
Browse files

Started cleaning up fx, made easing easier to use.

  • Loading branch information
jeresig committed Jan 7, 2007
1 parent 458d427 commit f6205e054eb6b04b71f8487d55bb0e5730bb3c52
Showing with 76 additions and 80 deletions.
  1. +76 −80 src/fx/fx.js
@@ -24,10 +24,10 @@ jQuery.fn.extend({
* @cat Effects/Animations
* @see hide(String|Number,Function)
*/
show: function(speed,callback, easing){
show: function(speed,callback){
return speed ? this.animate({
height: "show", width: "show", opacity: "show"
}, speed, callback, easing) : this._show();
}, speed, callback) : this._show();
},

// Overwrite the old hide method
@@ -54,10 +54,10 @@ jQuery.fn.extend({
* @cat Effects/Animations
* @see show(String|Number,Function)
*/
hide: function(speed,callback, easing){
hide: function(speed,callback){
return speed ? this.animate({
height: "hide", width: "hide", opacity: "hide"
}, speed, callback, easing) : this._hide();
}, speed, callback) : this._hide();
},

/**
@@ -82,8 +82,8 @@ jQuery.fn.extend({
* @see slideUp(String|Number,Function)
* @see slideToggle(String|Number,Function)
*/
slideDown: function(speed,callback, easing){
return this.animate({height: "show"}, speed, callback, easing);
slideDown: function(speed,callback){
return this.animate({height: "show"}, speed, callback);
},

/**
@@ -108,8 +108,8 @@ jQuery.fn.extend({
* @see slideDown(String|Number,Function)
* @see slideToggle(String|Number,Function)
*/
slideUp: function(speed,callback, easing){
return this.animate({height: "hide"}, speed, callback, easing);
slideUp: function(speed,callback){
return this.animate({height: "hide"}, speed, callback);
},

/**
@@ -134,10 +134,10 @@ jQuery.fn.extend({
* @see slideDown(String|Number,Function)
* @see slideUp(String|Number,Function)
*/
slideToggle: function(speed, callback, easing){
slideToggle: function(speed, callback){
return this.each(function(){
var state = jQuery(this).is(":hidden") ? "show" : "hide";
jQuery(this).animate({height: state}, speed, callback, easing);
jQuery(this).animate({height: state}, speed, callback);
});
},

@@ -164,8 +164,8 @@ jQuery.fn.extend({
* @see fadeOut(String|Number,Function)
* @see fadeTo(String|Number,Number,Function)
*/
fadeIn: function(speed, callback, easing){
return this.animate({opacity: "show"}, speed, callback, easing);
fadeIn: function(speed, callback){
return this.animate({opacity: "show"}, speed, callback);
},

/**
@@ -191,8 +191,8 @@ jQuery.fn.extend({
* @see fadeIn(String|Number,Function)
* @see fadeTo(String|Number,Number,Function)
*/
fadeOut: function(speed, callback, easing){
return this.animate({opacity: "hide"}, speed, callback, easing);
fadeOut: function(speed, callback){
return this.animate({opacity: "hide"}, speed, callback);
},

/**
@@ -219,8 +219,8 @@ jQuery.fn.extend({
* @see fadeIn(String|Number,Function)
* @see fadeOut(String|Number,Function)
*/
fadeTo: function(speed,to,callback, easing){
return this.animate({opacity: to}, speed, callback, easing);
fadeTo: function(speed,to,callback){
return this.animate({opacity: to}, speed, callback);
},

/**
@@ -251,13 +251,14 @@ jQuery.fn.extend({
* @param String easing (optional) easing effect
* @cat Effects/Animations
*/
animate: function(prop,speed,callback, easing) {
animate: function( prop, speed, easing, callback ) {
return this.queue(function(){

this.curAnim = jQuery.extend({}, prop);
this.curAnim = jQuery.extend({}, prop);
var opt = jQuery.speed(speed, easing, callback);

for ( var p in prop ) {
var e = new jQuery.fx( this, jQuery.speed(speed,callback), p, easing );
var e = new jQuery.fx( this, opt, p );
if ( prop[p].constructor == Number )
e.custom( e.cur(), prop[p] );
else
@@ -295,25 +296,30 @@ jQuery.fn.extend({

jQuery.extend({

speed: function(s,o) {
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;
speed: function(speed, easing, fn) {
var opt = speed.constructor == Object ? speed : {
complete: fn || !fn && easing ||
speed.constructor == Function && speed,
duration: speed,
easing: fn && easing || easing && easing.constructor != Function && easing
};

opt.duration = (opt.duration.constructor == Number ?
opt.duration :
{ slow: 600, fast: 200 }[opt.duration]) || 400;

// Queueing
o.oldComplete = o.complete;
o.complete = function(){
opt.oldComplete = opt.complete;
opt.complete = function(){
jQuery.dequeue(this, "fx");
if ( o.oldComplete && o.oldComplete.constructor == Function )
o.oldComplete.apply( this );
if ( opt.oldComplete && opt.oldComplete.constructor == Function )
opt.oldComplete.apply( this );
};

return o;
},
return opt;
},

easing: {},

queue: {},

@@ -337,26 +343,15 @@ jQuery.extend({
* people. You've been warned.
*/

fx: function( elem, options, prop, easing ){
fx: function( elem, options, prop ){

var z = this;

// The users options
z.o = {
duration: options.duration || 400,
complete: options.complete,
step: options.step,
easing : easing || 'linear'
};

// The element
z.el = elem;

// The styles
var y = z.el.style;
var y = elem.style;

// Store display property
var oldDisplay = jQuery.css(z.el, 'display');
var oldDisplay = jQuery.css(elem, 'display');
// Set display property to block for animation
y.display = "block";
// Make sure that nothing sneaks out
@@ -375,12 +370,12 @@ jQuery.extend({

// Figure out the maximum number to run to
z.max = function(){
return parseFloat( jQuery.css(z.el,prop) );
return parseFloat( jQuery.css(elem,prop) );
};

// Get the current size
z.cur = function(){
var r = parseFloat( jQuery.curCSS(z.el, prop) );
var r = parseFloat( jQuery.curCSS(elem, prop) );
return r && r > -10000 ? r : z.max();
};

@@ -397,15 +392,15 @@ jQuery.extend({

// Simple 'show' function
z.show = function(){
if ( !z.el.orig ) z.el.orig = {};
if ( !elem.orig ) elem.orig = {};

// Remember where we started, so that we can go back to it later
z.el.orig[prop] = this.cur();
elem.orig[prop] = this.cur();

z.o.show = true;
options.show = true;

// Begin the animation
z.custom(0, z.el.orig[prop]);
z.custom(0, elem.orig[prop]);

// Stupid IE, look what you made me do
if ( prop != "opacity" )
@@ -414,58 +409,58 @@ jQuery.extend({

// Simple 'hide' function
z.hide = function(){
if ( !z.el.orig ) z.el.orig = {};
if ( !elem.orig ) elem.orig = {};

// Remember where we started, so that we can go back to it later
z.el.orig[prop] = this.cur();
elem.orig[prop] = this.cur();

z.o.hide = true;
options.hide = true;

// Begin the animation
z.custom(z.el.orig[prop], 0);
z.custom(elem.orig[prop], 0);
};

//Simple 'toggle' function
z.toggle = function() {
if ( !z.el.orig ) z.el.orig = {};
if ( !elem.orig ) elem.orig = {};

// Remember where we started, so that we can go back to it later
z.el.orig[prop] = this.cur();
elem.orig[prop] = this.cur();

if(oldDisplay == 'none') {
z.o.show = true;
options.show = true;

// Stupid IE, look what you made me do
if ( prop != "opacity" )
y[prop] = "1px";

// Begin the animation
z.custom(0, z.el.orig[prop]);
z.custom(0, elem.orig[prop]);
} else {
z.o.hide = true;
options.hide = true;

// Begin the animation
z.custom(z.el.orig[prop], 0);
z.custom(elem.orig[prop], 0);
}
};

// Each step of an animation
z.step = function(firstNum, lastNum){
var t = (new Date()).getTime();

if (t > z.o.duration + z.startTime) {
if (t > options.duration + z.startTime) {
// Stop the timer
clearInterval(z.timer);
z.timer = null;

z.now = lastNum;
z.a();

if (z.el.curAnim) z.el.curAnim[ prop ] = true;
if (elem.curAnim) elem.curAnim[ prop ] = true;

var done = true;
for ( var i in z.el.curAnim )
if ( z.el.curAnim[i] !== true )
for ( var i in elem.curAnim )
if ( elem.curAnim[i] !== true )
done = false;

if ( done ) {
@@ -474,35 +469,36 @@ jQuery.extend({

// Reset the display
y.display = oldDisplay;
if (jQuery.css(z.el, 'display') == 'none')
if (jQuery.css(elem, 'display') == 'none')
y.display = 'block';

// Hide the element if the "hide" operation was done
if ( z.o.hide )
if ( options.hide )
y.display = 'none';

// Reset the properties, if the item has been hidden or shown
if ( z.o.hide || z.o.show )
for ( var p in z.el.curAnim )
if ( options.hide || options.show )
for ( var p in elem.curAnim )
if (p == "opacity")
jQuery.attr(y, p, z.el.orig[p]);
jQuery.attr(y, p, elem.orig[p]);
else
y[p] = '';
}

// If a callback was provided, execute it
if( done && z.o.complete && z.o.complete.constructor == Function )
if ( done && options.complete && options.complete.constructor == Function )
// Execute the complete function
z.o.complete.apply( z.el );
options.complete.apply( elem );
} else {
var n = t - this.startTime;
// Figure out where in the animation we are and set the number
var p = n / z.o.duration;
//if the easing function exists then use it else use default linear easing
if (jQuery.easing && jQuery.easing[z.o.easing])
z.now = jQuery.easing[z.o.easing](p, n, firstNum, (lastNum-firstNum), z.o.duration);
else
z.now = ((-Math.cos(p*Math.PI)/2) + 0.5) * (lastNum-firstNum) + firstNum;
var p = n / options.duration;

// If the easing function exists, then use it
z.now = options.easing && jQuery.easing[options.easing] ?
jQuery.easing[options.easing](p, n, firstNum, (lastNum-firstNum), options.duration) :
// else use default linear easing
((-Math.cos(p*Math.PI)/2) + 0.5) * (lastNum-firstNum) + firstNum;

// Perform the next step of the animation
z.a();

0 comments on commit f6205e0

Please sign in to comment.
You can’t perform that action at this time.