mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
effects.core: Style Guidance
This commit is contained in:
gnarf
parent
576cd0b92b
commit
703cd82cd0
113
ui/jquery.effects.core.js
vendored
113
ui/jquery.effects.core.js
vendored
@ -11,8 +11,6 @@
|
||||
|
||||
$.effects = {};
|
||||
|
||||
|
||||
|
||||
/******************************************************************************/
|
||||
/****************************** COLOR ANIMATIONS ******************************/
|
||||
/******************************************************************************/
|
||||
@ -163,11 +161,12 @@ function getElementStyles() {
|
||||
: this.currentStyle,
|
||||
newStyle = {},
|
||||
key,
|
||||
camelCase;
|
||||
camelCase,
|
||||
len;
|
||||
|
||||
// webkit enumerates style porperties
|
||||
if ( style && style.length && style[ 0 ] && style[ style[ 0 ] ] ) {
|
||||
var len = style.length;
|
||||
len = style.length;
|
||||
while ( len-- ) {
|
||||
key = style[ len ];
|
||||
if ( typeof style[ key ] == 'string' ) {
|
||||
@ -248,7 +247,9 @@ $.effects.animateClass = function(value, duration, easing, callback) {
|
||||
|
||||
that.animate( styleDifference( originalStyle, newStyle ), duration, easing, function() {
|
||||
$.each( classAnimationActions, function( i, action ) {
|
||||
if (value[action]) { that[action + 'Class'](value[action]); }
|
||||
if ( value[ action ] ) {
|
||||
that[ action + 'Class' ]( value[ action ] );
|
||||
}
|
||||
});
|
||||
// work around bug in IE by clearing the cssText before setting it
|
||||
if ( typeof that.attr( 'style' ) == 'object' ) {
|
||||
@ -257,7 +258,9 @@ $.effects.animateClass = function(value, duration, easing, callback) {
|
||||
} else {
|
||||
that.attr( 'style', originalStyleAttr );
|
||||
}
|
||||
if (callback) { callback.apply(this, arguments); }
|
||||
if ( callback ) {
|
||||
callback.apply( this, arguments );
|
||||
}
|
||||
});
|
||||
|
||||
// $.animate adds a function to the end of the queue
|
||||
@ -272,12 +275,16 @@ $.effects.animateClass = function(value, duration, easing, callback) {
|
||||
$.fn.extend({
|
||||
_addClass: $.fn.addClass,
|
||||
addClass: function( classNames, speed, easing, callback ) {
|
||||
return speed ? $.effects.animateClass.apply(this, [{ add: classNames },speed,easing,callback]) : this._addClass(classNames);
|
||||
return speed ?
|
||||
$.effects.animateClass.apply( this, [{ add: classNames }, speed, easing, callback ]) :
|
||||
this._addClass(classNames);
|
||||
},
|
||||
|
||||
_removeClass: $.fn.removeClass,
|
||||
removeClass: function( classNames, speed, easing, callback ) {
|
||||
return speed ? $.effects.animateClass.apply(this, [{ remove: classNames },speed,easing,callback]) : this._removeClass(classNames);
|
||||
return speed ?
|
||||
$.effects.animateClass.apply( this, [{ remove: classNames }, speed, easing, callback ]) :
|
||||
this._removeClass(classNames);
|
||||
},
|
||||
|
||||
_toggleClass: $.fn.toggleClass,
|
||||
@ -296,7 +303,10 @@ $.fn.extend({
|
||||
},
|
||||
|
||||
switchClass: function( remove, add, speed, easing, callback) {
|
||||
return $.effects.animateClass.apply(this, [{ add: add, remove: remove },speed,easing,callback]);
|
||||
return $.effects.animateClass.apply( this, [{
|
||||
add: add,
|
||||
remove: remove
|
||||
}, speed, easing, callback ]);
|
||||
}
|
||||
});
|
||||
|
||||
@ -312,24 +322,31 @@ $.extend($.effects, {
|
||||
// Saves a set of properties in a data storage
|
||||
save: function( element, set ) {
|
||||
for( var i=0; i < set.length; i++ ) {
|
||||
if(set[i] !== null) element.data("ec.storage."+set[i], element[0].style[set[i]]);
|
||||
if ( set[ i ] !== null ) {
|
||||
element.data( "ec.storage." + set[ i ], element[ 0 ].style[ set[ i ] ] );
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// Restores a set of previously saved properties from a data storage
|
||||
restore: function( element, set ) {
|
||||
for( var i=0; i < set.length; i++ ) {
|
||||
if(set[i] !== null) element.css(set[i], element.data("ec.storage."+set[i]));
|
||||
if ( set[ i ] !== null ) {
|
||||
element.css( set[ i ], element.data( "ec.storage." + set[ i ] ) );
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
setMode: function( el, mode ) {
|
||||
if (mode == 'toggle') mode = el.is(':hidden') ? 'show' : 'hide'; // Set for toggle
|
||||
if (mode == 'toggle') {
|
||||
mode = el.is( ':hidden' ) ? 'show' : 'hide';
|
||||
}
|
||||
return mode;
|
||||
},
|
||||
|
||||
getBaseline: function(origin, original) { // Translates a [top,left] array into a baseline value
|
||||
// Translates a [top,left] array into a baseline value
|
||||
// this should be a little more flexible in the future to handle a string & hash
|
||||
getBaseline: function( origin, original ) {
|
||||
var y, x;
|
||||
switch ( origin[ 0 ] ) {
|
||||
case 'top': y = 0; break;
|
||||
@ -343,7 +360,10 @@ $.extend($.effects, {
|
||||
case 'right': x = 1; break;
|
||||
default: x = origin[ 1 ] / original.width;
|
||||
};
|
||||
return {x: x, y: y};
|
||||
return {
|
||||
x: x,
|
||||
y: y
|
||||
};
|
||||
},
|
||||
|
||||
// Wraps the element around a wrapper that copies position properties
|
||||
@ -388,7 +408,13 @@ $.extend($.effects, {
|
||||
props[ pos ] = 'auto';
|
||||
}
|
||||
});
|
||||
element.css({position: 'relative', top: 0, left: 0, right: 'auto', bottom: 'auto' });
|
||||
element.css({
|
||||
position: 'relative',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 'auto',
|
||||
bottom: 'auto'
|
||||
});
|
||||
}
|
||||
|
||||
return wrapper.css( props ).show();
|
||||
@ -526,7 +552,9 @@ $.fn.extend({
|
||||
|
||||
// helper functions
|
||||
cssUnit: function(key) {
|
||||
var style = this.css(key), val = [];
|
||||
var style = this.css( key ),
|
||||
val = [];
|
||||
|
||||
$.each( [ 'em', 'px', '%', 'pt' ], function( i, unit ) {
|
||||
if ( style.indexOf( unit ) > 0 )
|
||||
val = [ parseFloat( style ), unit ];
|
||||
@ -581,11 +609,9 @@ $.fn.extend({
|
||||
// t: current time, b: begInnIng value, c: change In value, d: duration
|
||||
$.easing.jswing = $.easing.swing;
|
||||
|
||||
$.extend($.easing,
|
||||
{
|
||||
$.extend( $.easing, {
|
||||
def: 'easeOutQuad',
|
||||
swing: function ( x, t, b, c, d ) {
|
||||
//alert($.easing.default);
|
||||
return $.easing[ $.easing.def ]( x, t, b, c, d );
|
||||
},
|
||||
easeInQuad: function ( x, t, b, c, d ) {
|
||||
@ -660,24 +686,45 @@ $.extend($.easing,
|
||||
return c / 2 * ( Math.sqrt( 1 - ( t -= 2 ) * t ) + 1 ) + b;
|
||||
},
|
||||
easeInElastic: function ( x, t, b, c, d ) {
|
||||
var s=1.70158;var p=0;var a=c;
|
||||
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
|
||||
if (a < Math.abs(c)) { a=c; var s=p/4; }
|
||||
else var s = p/(2*Math.PI) * Math.asin (c/a);
|
||||
var s = 1.70158,
|
||||
p = d * 0.3,
|
||||
a = c;
|
||||
if ( t == 0 ) return b;
|
||||
if ( ( t /= d ) == 1 ) return b+c;
|
||||
if ( a < Math.abs( c ) ) {
|
||||
a = c;
|
||||
s = p / 4;
|
||||
} else {
|
||||
s = p / ( 2 * Math.PI ) * Math.asin( c / a );
|
||||
}
|
||||
return - ( a * Math.pow( 2, 10 * ( t -= 1 ) ) * Math.sin( ( t * d - s) * ( 2 * Math.PI ) / p ) ) + b;
|
||||
},
|
||||
easeOutElastic: function ( x, t, b, c, d ) {
|
||||
var s=1.70158;var p=0;var a=c;
|
||||
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
|
||||
if (a < Math.abs(c)) { a=c; var s=p/4; }
|
||||
else var s = p/(2*Math.PI) * Math.asin (c/a);
|
||||
var s = 1.70158,
|
||||
p = d * 0.3,
|
||||
a = c;
|
||||
if ( t == 0 ) return b;
|
||||
if ( ( t /= d ) == 1 ) return b+c;
|
||||
if ( a < Math.abs( c ) ) {
|
||||
a = c;
|
||||
s = p / 4;
|
||||
} else {
|
||||
s = p / ( 2 * Math.PI ) * Math.asin( c / a );
|
||||
}
|
||||
return a * Math.pow( 2, -10 * t ) * Math.sin( ( t * d - s ) * ( 2 * Math.PI ) / p ) + c + b;
|
||||
},
|
||||
easeInOutElastic: function ( x, t, b, c, d ) {
|
||||
var s=1.70158;var p=0;var a=c;
|
||||
if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);
|
||||
if (a < Math.abs(c)) { a=c; var s=p/4; }
|
||||
else var s = p/(2*Math.PI) * Math.asin (c/a);
|
||||
var s = 1.70158,
|
||||
p = d * ( 0.3 * 1.5 ),
|
||||
a = c;
|
||||
if ( t == 0 ) return b;
|
||||
if ( ( t /= d / 2 ) == 2 ) return b+c;
|
||||
if ( a < Math.abs( c ) ) {
|
||||
a = c;
|
||||
s = p / 4;
|
||||
} else {
|
||||
s = p / ( 2 * Math.PI ) * Math.asin( c / a );
|
||||
}
|
||||
if ( t < 1 ) return -.5 * ( a * Math.pow( 2, 10 * ( t -= 1 ) ) * Math.sin( ( t * d - s ) * ( 2 * Math.PI ) / p ) ) + b;
|
||||
return a * Math.pow( 2, -10 * ( t -= 1 ) ) * Math.sin( ( t * d - s ) * ( 2 * Math.PI ) / p ) *.5 + c + b;
|
||||
},
|
||||
@ -691,8 +738,8 @@ $.extend($.easing,
|
||||
},
|
||||
easeInOutBack: function ( x, t, b, c, d, s ) {
|
||||
if ( s == undefined ) s = 1.70158;
|
||||
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
|
||||
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
|
||||
if ( ( t /= d / 2 ) < 1 ) return c / 2 * ( t * t * ( ( ( s *= 1.525 ) + 1 ) * t - s ) ) + b;
|
||||
return c / 2 * ( ( t -= 2 ) * t * ( ( ( s *= 1.525 ) + 1 ) * t + s) + 2) + b;
|
||||
},
|
||||
easeInBounce: function ( x, t, b, c, d ) {
|
||||
return c - $.easing.easeOutBounce( x, d - t, 0, c, d ) + b;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user