Merge branch 'effects-api' of https://github.com/gnarf37/jquery-ui into gnarf37-effects-api

This commit is contained in:
Scott González
2011-03-09 10:01:07 -05:00
16 changed files with 902 additions and 652 deletions

View File

@@ -11,6 +11,7 @@
<script type="text/javascript" src="../../ui/jquery.effects.clip.js"></script>
<script type="text/javascript" src="../../ui/jquery.effects.drop.js"></script>
<script type="text/javascript" src="../../ui/jquery.effects.explode.js"></script>
<script type="text/javascript" src="../../ui/jquery.effects.fade.js"></script>
<script type="text/javascript" src="../../ui/jquery.effects.fold.js"></script>
<script type="text/javascript" src="../../ui/jquery.effects.highlight.js"></script>
<script type="text/javascript" src="../../ui/jquery.effects.pulsate.js"></script>
@@ -90,6 +91,12 @@
</div>
</li>
<li>
<div class="effect" id="fade">
<p>Fade</p>
</div>
</li>
<li>
<div class="effect" id="fold">
<p>Fold</p>
@@ -174,6 +181,12 @@
</div>
</li>
<li>
<div class="effect" id="hide">
<p>hide/show (jQuery)</p>
</div>
</li>
</ul>
</body>

View File

@@ -1,5 +1,6 @@
$(function() {
var duration = 1000, wait = 500;
$("div.effect")
.hover(function() { $(this).addClass("hover"); },
@@ -13,15 +14,24 @@ $(function() {
$(el).bind("click", function() {
$(this).addClass("current").hide(n, o, 1000, function() {
$(this).addClass("current").hide(n, o, duration, function() {
var self = this;
window.setTimeout(function() {
$(self).show(n, o, 1000, function() { $(this).removeClass("current"); });
},500);
$(self).show(n, o, duration, function() { $(this).removeClass("current"); });
}, wait);
});
});
};
$("#hide").click(function() {
var el = $(this);
el.addClass("current").hide(duration, function() {
setTimeout(function() {
el.show(duration, function() { el.removeClass("current") });
}, wait);
})
})
effect("#blindHorizontally", "blind", { direction: "horizontal" });
effect("#blindVertically", "blind", { direction: "vertical" });
@@ -39,6 +49,8 @@ $(function() {
effect("#explode9", "explode", {});
effect("#explode36", "explode", { pieces: 36 });
effect("#fade", "fade", {});
effect("#fold", "fold", { size: 50 });
effect("#highlight", "highlight", {});
@@ -61,7 +73,7 @@ $(function() {
$(this).addClass(function() {
window.console && console.log(arguments);
return "current";
}, 1000, function() {
}, duration, function() {
$(this).removeClass("current");
});
});
@@ -69,12 +81,12 @@ $(function() {
$(this).addClass("current").removeClass(function() {
window.console && console.log(arguments);
return "current"
}, 1000);
}, duration);
});
$("#toggleClass").click(function() {
$(this).toggleClass(function() {
window.console && console.log(arguments);
return "current"
}, 1000);
}, duration);
});
});

View File

@@ -12,33 +12,36 @@
*/
(function( $, undefined ) {
$.effects.blind = function(o) {
$.effects.blind = function( o ) {
return this.queue(function() {
return this.queue( function() {
// Create element
var el = $(this), props = ['position','top','bottom','left','right'];
var el = $( this ),
props = [ 'position', 'top', 'bottom', 'left', 'right' ],
mode = $.effects.setMode( el, o.mode || 'hide' ),
direction = o.direction || 'vertical',
ref = ( direction == 'vertical' ) ? 'height' : 'width',
animation = {},
wrapper, distance;
// Set options
var mode = $.effects.setMode(el, o.options.mode || 'hide'); // Set Mode
var direction = o.options.direction || 'vertical'; // Default direction
$.effects.save( el, props );
el.show();
wrapper = $.effects.createWrapper( el ).css({
overflow: 'hidden'
});
// Adjust
$.effects.save(el, props); el.show(); // Save & Show
var wrapper = $.effects.createWrapper(el).css({overflow:'hidden'}); // Create Wrapper
var ref = (direction == 'vertical') ? 'height' : 'width';
var distance = (direction == 'vertical') ? wrapper.height() : wrapper.width();
if(mode == 'show') wrapper.css(ref, 0); // Shift
animation[ ref ] = ( mode == 'show' ? wrapper[ ref ]() : 0 );
// Animation
var animation = {};
animation[ref] = mode == 'show' ? distance : 0;
// start at 0 if we are showing
( mode == 'show' && wrapper.css( ref, 0 ) );
// Animate
wrapper.animate(animation, o.duration, o.options.easing, function() {
if(mode == 'hide') el.hide(); // Hide
$.effects.restore(el, props); $.effects.removeWrapper(el); // Restore
if(o.callback) o.callback.apply(el[0], arguments); // Callback
wrapper.animate( animation, o.duration, o.easing, function() {
( mode == 'hide' && el.hide() );
$.effects.restore( el, props );
$.effects.removeWrapper( el );
$.isFunction( o.complete ) && o.complete.apply( el[ 0 ], arguments );
el.dequeue();
});

View File

@@ -12,64 +12,88 @@
*/
(function( $, undefined ) {
var rshowhide = /show|hide/;
$.effects.bounce = function(o) {
return this.queue(function() {
// Create element
var el = $(this), props = ['position','top','bottom','left','right'];
var el = $( this ),
props = [ 'position', 'top', 'bottom', 'left', 'right' ],
// defaults:
mode = $.effects.setMode( el, o.mode || 'effect' ),
direction = o.direction || 'up',
distance = o.distance || 20,
times = o.times || 5,
speed = (o.duration || 250),
// utility:
ref = ( direction == 'up' || direction == 'down' ) ? 'top' : 'left',
motion = ( direction == 'up' || direction == 'left' ), // true is positive
i, animation, animation1, animation2;
// Avoid touching opacity to prevent clearType and PNG issues in IE
if ( rshowhide.test( mode ) ) {
props.push( 'opacity' );
}
// Set options
var mode = $.effects.setMode(el, o.options.mode || 'effect'); // Set Mode
var direction = o.options.direction || 'up'; // Default direction
var distance = o.options.distance || 20; // Default distance
var times = o.options.times || 5; // Default # of times
var speed = o.duration || 250; // Default speed per bounce
if (/show|hide/.test(mode)) props.push('opacity'); // Avoid touching opacity to prevent clearType and PNG issues in IE
$.effects.save( el, props );
el.show();
$.effects.createWrapper( el ); // Create Wrapper
// Adjust
$.effects.save(el, props); el.show(); // Save & Show
$.effects.createWrapper(el); // Create Wrapper
var ref = (direction == 'up' || direction == 'down') ? 'top' : 'left';
var motion = (direction == 'up' || direction == 'left') ? 'pos' : 'neg';
var distance = o.options.distance || (ref == 'top' ? el.outerHeight({margin:true}) / 3 : el.outerWidth({margin:true}) / 3);
if (mode == 'show') el.css('opacity', 0).css(ref, motion == 'pos' ? -distance : distance); // Shift
if (mode == 'hide') distance = distance / (times * 2);
if (mode != 'hide') times--;
if ( !distance ) {
distance = el[ ref == 'top' ? 'outerHeight' : 'outerWidth' ]({ margin:true }) / 3;
}
if ( mode == 'show' ) el.css( 'opacity', 0 ).css( ref, motion ? -distance : distance ); // Shift
if ( mode == 'hide' ) distance = distance / (times * 2);
if ( mode != 'hide' ) times--;
// Animate
if (mode == 'show') { // Show Bounce
var animation = {opacity: 1};
animation[ref] = (motion == 'pos' ? '+=' : '-=') + distance;
el.animate(animation, speed / 2, o.options.easing);
if ( mode == 'show' ) {
animation = {
opacity: 1
};
animation[ ref ] = ( motion ? '+=' : '-=' ) + distance;
el.animate( animation, speed / 2, o.easing);
distance = distance / 2;
times--;
};
for (var i = 0; i < times; i++) { // Bounces
var animation1 = {}, animation2 = {};
animation1[ref] = (motion == 'pos' ? '-=' : '+=') + distance;
animation2[ref] = (motion == 'pos' ? '+=' : '-=') + distance;
el.animate(animation1, speed / 2, o.options.easing).animate(animation2, speed / 2, o.options.easing);
distance = (mode == 'hide') ? distance * 2 : distance / 2;
};
if (mode == 'hide') { // Last Bounce
var animation = {opacity: 0};
animation[ref] = (motion == 'pos' ? '-=' : '+=') + distance;
el.animate(animation, speed / 2, o.options.easing, function(){
el.hide(); // Hide
$.effects.restore(el, props); $.effects.removeWrapper(el); // Restore
if(o.callback) o.callback.apply(this, arguments); // Callback
// Bounces
for (i = 0; i < times; i++) {
animation1 = {};
animation2 = {};
animation1[ ref ] = ( motion ? '-=' : '+=' ) + distance;
animation2[ ref ] = ( motion ? '+=' : '-=' ) + distance;
el.animate( animation1, speed / 2, o.easing ).animate( animation2, speed / 2, o.easing );
distance = ( mode == 'hide' ) ? distance * 2 : distance / 2;
}
// Last Bounce
if ( mode == 'hide' ) {
animation = {
opacity: 0
};
animation[ ref ] = ( motion ? '-=' : '+=' ) + distance;
el.animate( animation, speed / 2, o.easing, function(){
el.hide();
$.effects.restore( el, props );
$.effects.removeWrapper( el );
$.isFunction( o.complete ) && o.complete.apply( this, arguments );
});
} else {
var animation1 = {}, animation2 = {};
animation1[ref] = (motion == 'pos' ? '-=' : '+=') + distance;
animation2[ref] = (motion == 'pos' ? '+=' : '-=') + distance;
el.animate(animation1, speed / 2, o.options.easing).animate(animation2, speed / 2, o.options.easing, function(){
$.effects.restore(el, props); $.effects.removeWrapper(el); // Restore
if(o.callback) o.callback.apply(this, arguments); // Callback
});
};
el.queue('fx', function() { el.dequeue(); });
animation1 = {};
animation2 = {};
animation1[ ref ] = ( motion ? '-=' : '+=' ) + distance;
animation2[ ref ] = ( motion ? '+=' : '-=' ) + distance;
el
.animate( animation1, speed / 2, o.easing )
.animate( animation2, speed / 2, o.easing, function() {
$.effects.restore( el, props );
$.effects.removeWrapper( el );
$.isFunction( o.complete ) && o.complete.apply( this, arguments );
});
}
el.dequeue();
});

View File

@@ -12,40 +12,55 @@
*/
(function( $, undefined ) {
$.effects.clip = function(o) {
$.effects.clip = function( o ) {
return this.queue(function() {
return this.queue( function() {
// Create element
var el = $(this), props = ['position','top','bottom','left','right','height','width'];
var el = $( this ),
props = ['position','top','bottom','left','right','height','width'],
mode = $.effects.setMode( el, o.mode || 'hide' ),
direction = o.direction || 'vertical',
ref = {
size: (direction == 'vertical') ? 'height' : 'width',
position: (direction == 'vertical') ? 'top' : 'left'
},
animation = {},
wrapper, animate, distance;
// Set options
var mode = $.effects.setMode(el, o.options.mode || 'hide'); // Set Mode
var direction = o.options.direction || 'vertical'; // Default direction
// Save & Show
$.effects.save( el, props ); el.show();
// Adjust
$.effects.save(el, props); el.show(); // Save & Show
var wrapper = $.effects.createWrapper(el).css({overflow:'hidden'}); // Create Wrapper
var animate = el[0].tagName == 'IMG' ? wrapper : el;
var ref = {
size: (direction == 'vertical') ? 'height' : 'width',
position: (direction == 'vertical') ? 'top' : 'left'
};
var distance = (direction == 'vertical') ? animate.height() : animate.width();
if(mode == 'show') { animate.css(ref.size, 0); animate.css(ref.position, distance / 2); } // Shift
// Create Wrapper
wrapper = $.effects.createWrapper( el ).css({
overflow: 'hidden'
});
animate = ( el[0].tagName == 'IMG' ) ? wrapper : el;
distance = animate[ ref.size ]();
// Animation
var animation = {};
animation[ref.size] = mode == 'show' ? distance : 0;
animation[ref.position] = mode == 'show' ? 0 : distance / 2;
// Shift
if ( mode == 'show' ) {
animate.css( ref.size, 0 );
animate.css( ref.position, distance / 2 );
}
// Create Animation Object:
animation[ ref.size ] = mode == 'show' ? distance : 0;
animation[ ref.position ] = mode == 'show' ? 0 : distance / 2;
// Animate
animate.animate(animation, { queue: false, duration: o.duration, easing: o.options.easing, complete: function() {
if(mode == 'hide') el.hide(); // Hide
$.effects.restore(el, props); $.effects.removeWrapper(el); // Restore
if(o.callback) o.callback.apply(el[0], arguments); // Callback
el.dequeue();
}});
animate.animate( animation, {
queue: false,
duration: o.duration,
easing: o.easing,
complete: function() {
mode == 'hide' && el.hide();
$.effects.restore( el, props );
$.effects.removeWrapper( el );
$.isFunction( o.complete ) && o.complete.apply( el[ 0 ], arguments );
el.dequeue();
}
});
});

View File

@@ -11,8 +11,6 @@
$.effects = {};
/******************************************************************************/
/****************************** COLOR ANIMATIONS ******************************/
/******************************************************************************/
@@ -144,7 +142,7 @@ var colors = {
/****************************** CLASS ANIMATIONS ******************************/
/******************************************************************************/
var classAnimationActions = ['add', 'remove', 'toggle'],
var classAnimationActions = [ 'add', 'remove', 'toggle' ],
shorthandStyles = {
border: 1,
borderBottom: 1,
@@ -163,24 +161,25 @@ 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;
while (len--) {
key = style[len];
if (typeof style[key] == 'string') {
camelCase = key.replace(/\-(\w)/g, function(all, letter){
if ( style && style.length && style[ 0 ] && style[ style[ 0 ] ] ) {
len = style.length;
while ( len-- ) {
key = style[ len ];
if ( typeof style[ key ] == 'string' ) {
camelCase = key.replace( /\-(\w)/g, function( all, letter ) {
return letter.toUpperCase();
});
newStyle[camelCase] = style[key];
newStyle[ camelCase ] = style[ key ];
}
}
} else {
for (key in style) {
if (typeof style[key] === 'string') {
newStyle[key] = style[key];
for ( key in style ) {
if ( typeof style[ key ] === 'string' ) {
newStyle[ key ] = style[ key ];
}
}
}
@@ -188,115 +187,126 @@ function getElementStyles() {
return newStyle;
}
function filterStyles(styles) {
function filterStyles( styles ) {
var name, value;
for (name in styles) {
value = styles[name];
for ( name in styles ) {
value = styles[ name ];
if (
// ignore null and undefined values
value == null ||
// ignore functions (when does this occur?)
$.isFunction(value) ||
$.isFunction( value ) ||
// shorthand styles that need to be expanded
name in shorthandStyles ||
// ignore scrollbars (break in IE)
(/scrollbar/).test(name) ||
( /scrollbar/ ).test( name ) ||
// only colors or values that can be converted to numbers
(!(/color/i).test(name) && isNaN(parseFloat(value)))
( !( /color/i ).test( name ) && isNaN( parseFloat( value ) ) )
) {
delete styles[name];
delete styles[ name ];
}
}
return styles;
}
function styleDifference(oldStyle, newStyle) {
function styleDifference( oldStyle, newStyle ) {
var diff = { _: 0 }, // http://dev.jquery.com/ticket/5459
name;
for (name in newStyle) {
if (oldStyle[name] != newStyle[name]) {
diff[name] = newStyle[name];
for ( name in newStyle ) {
if ( oldStyle[ name ] != newStyle[ name ] ) {
diff[ name ] = newStyle[ name ];
}
}
return diff;
}
$.effects.animateClass = function(value, duration, easing, callback) {
if ($.isFunction(easing)) {
$.effects.animateClass = function( value, duration, easing, callback ) {
if ( $.isFunction( easing ) ) {
callback = easing;
easing = null;
}
return this.queue('fx', function() {
var that = $(this),
originalStyleAttr = that.attr('style') || ' ',
originalStyle = filterStyles(getElementStyles.call(this)),
return this.queue( 'fx', function() {
var that = $( this ),
originalStyleAttr = that.attr( 'style' ) || ' ',
originalStyle = filterStyles( getElementStyles.call( this ) ),
newStyle,
className = that.attr('className');
className = that.attr( 'className' );
$.each(classAnimationActions, function(i, action) {
if (value[action]) {
that[action + 'Class'](value[action]);
$.each( classAnimationActions, function(i, action) {
if ( value[ action ] ) {
that[ action + 'Class' ]( value[ action ] );
}
});
newStyle = filterStyles(getElementStyles.call(this));
that.attr('className', className);
newStyle = filterStyles( getElementStyles.call( this ) );
that.attr( 'className', className );
that.animate(styleDifference(originalStyle, newStyle), duration, easing, function() {
$.each(classAnimationActions, function(i, action) {
if (value[action]) { that[action + 'Class'](value[action]); }
that.animate( styleDifference( originalStyle, newStyle ), duration, easing, function() {
$.each( classAnimationActions, function( i, 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') {
that.attr('style').cssText = '';
that.attr('style').cssText = originalStyleAttr;
if ( typeof that.attr( 'style' ) == 'object' ) {
that.attr( 'style' ).cssText = '';
that.attr( 'style' ).cssText = originalStyleAttr;
} else {
that.attr('style', originalStyleAttr);
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
// but we want it at the front
var queue = $.queue(this),
anim = queue.splice(queue.length - 1, 1)[0];
queue.splice(1, 0, anim);
$.dequeue(this);
var queue = $.queue( this ),
anim = queue.splice( queue.length - 1, 1 )[ 0 ];
queue.splice( 1, 0, anim );
$.dequeue( this );
});
};
$.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);
addClass: function( classNames, speed, easing, callback ) {
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);
removeClass: function( classNames, speed, easing, callback ) {
return speed ?
$.effects.animateClass.apply( this, [{ remove: classNames }, speed, easing, callback ]) :
this._removeClass(classNames);
},
_toggleClass: $.fn.toggleClass,
toggleClass: function(classNames, force, speed, easing, callback) {
toggleClass: function( classNames, force, speed, easing, callback ) {
if ( typeof force == "boolean" || force === undefined ) {
if ( !speed ) {
// without speed parameter;
return this._toggleClass(classNames, force);
return this._toggleClass( classNames, force );
} else {
return $.effects.animateClass.apply(this, [(force?{add:classNames}:{remove:classNames}),speed,easing,callback]);
return $.effects.animateClass.apply( this, [( force ? { add:classNames } : { remove:classNames }), speed, easing, callback ]);
}
} else {
// without switch parameter;
return $.effects.animateClass.apply(this, [{ toggle: classNames },force,speed,easing]);
return $.effects.animateClass.apply( this, [{ toggle: classNames }, force, speed, easing ]);
}
},
switchClass: function(remove,add,speed,easing,callback) {
return $.effects.animateClass.apply(this, [{ add: add, remove: remove },speed,easing,callback]);
switchClass: function( remove, add, speed, easing, callback) {
return $.effects.animateClass.apply( this, [{
add: add,
remove: remove
}, speed, easing, callback ]);
}
});
@@ -306,51 +316,61 @@ $.fn.extend({
/*********************************** EFFECTS **********************************/
/******************************************************************************/
$.extend($.effects, {
$.extend( $.effects, {
version: "@VERSION",
// 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]]);
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 ] ] );
}
}
},
// 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]));
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 ] ) );
}
}
},
setMode: function(el, mode) {
if (mode == 'toggle') mode = el.is(':hidden') ? 'show' : 'hide'; // Set for toggle
setMode: function( el, mode ) {
if (mode == 'toggle') {
mode = el.is( ':hidden' ) ? 'show' : 'hide';
}
return mode;
},
getBaseline: function(origin, original) { // Translates a [top,left] array into a baseline value
// this should be a little more flexible in the future to handle a string & hash
// 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]) {
switch ( origin[ 0 ] ) {
case 'top': y = 0; break;
case 'middle': y = 0.5; break;
case 'bottom': y = 1; break;
default: y = origin[0] / original.height;
default: y = origin[ 0 ] / original.height;
};
switch (origin[1]) {
switch ( origin[ 1 ] ) {
case 'left': x = 0; break;
case 'center': x = 0.5; break;
case 'right': x = 1; break;
default: x = origin[1] / original.width;
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
createWrapper: function(element) {
createWrapper: function( element ) {
// if the element is already wrapped, return it
if (element.parent().is('.ui-effects-wrapper')) {
if ( element.parent().is( '.ui-effects-wrapper' )) {
return element.parent();
}
@@ -358,10 +378,10 @@ $.extend($.effects, {
var props = {
width: element.outerWidth(true),
height: element.outerHeight(true),
'float': element.css('float')
'float': element.css( 'float' )
},
wrapper = $('<div></div>')
.addClass('ui-effects-wrapper')
wrapper = $( '<div></div>' )
.addClass( 'ui-effects-wrapper' )
.css({
fontSize: '100%',
background: 'transparent',
@@ -370,79 +390,95 @@ $.extend($.effects, {
padding: 0
});
element.wrap(wrapper);
element.wrap( wrapper );
wrapper = element.parent(); //Hotfix for jQuery 1.4 since some change in wrap() seems to actually loose the reference to the wrapped element
// transfer positioning properties to the wrapper
if (element.css('position') == 'static') {
if ( element.css( 'position' ) == 'static' ) {
wrapper.css({ position: 'relative' });
element.css({ position: 'relative' });
} else {
$.extend(props, {
position: element.css('position'),
zIndex: element.css('z-index')
$.extend( props, {
position: element.css( 'position' ),
zIndex: element.css( 'z-index' )
});
$.each(['top', 'left', 'bottom', 'right'], function(i, pos) {
props[pos] = element.css(pos);
if (isNaN(parseInt(props[pos], 10))) {
props[pos] = 'auto';
$.each([ 'top', 'left', 'bottom', 'right' ], function(i, pos) {
props[ pos ] = element.css( pos );
if ( isNaN( parseInt( props[ pos ], 10 ) ) ) {
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();
return wrapper.css( props ).show();
},
removeWrapper: function(element) {
if (element.parent().is('.ui-effects-wrapper'))
return element.parent().replaceWith(element);
removeWrapper: function( element ) {
if ( element.parent().is( '.ui-effects-wrapper' ) )
return element.parent().replaceWith( element );
return element;
},
setTransition: function(element, list, factor, value) {
setTransition: function( element, list, factor, value ) {
value = value || {};
$.each(list, function(i, x){
unit = element.cssUnit(x);
if (unit[0] > 0) value[x] = unit[0] * factor + unit[1];
$.each( list, function(i, x){
unit = element.cssUnit( x );
if ( unit[ 0 ] > 0 ) value[ x ] = unit[ 0 ] * factor + unit[ 1 ];
});
return value;
}
});
// return an effect options object for the given parameters:
function _normalizeArguments( effect, options, speed, callback ) {
function _normalizeArguments(effect, options, speed, callback) {
// shift params for method overloading
if (typeof effect == 'object') {
callback = options;
speed = null;
options = effect;
effect = options.effect;
// short path for passing an effect options object:
if ( $.isPlainObject( effect ) ) {
return effect;
}
if ($.isFunction(options)) {
// convert to an object
effect = { effect: effect };
// catch (effect, callback)
if ( $.isFunction( options ) ) {
callback = options;
speed = null;
options = {};
}
if (typeof options == 'number' || $.fx.speeds[options]) {
// catch (effect, speed, ?)
if ( $.type( options ) == 'number' || $.fx.speeds[ options ]) {
callback = speed;
speed = options;
options = {};
}
if ($.isFunction(speed)) {
// catch (effect, options, callback)
if ( $.isFunction( speed ) ) {
callback = speed;
speed = null;
}
options = options || {};
// add options to effect
if ( options ) {
$.extend( effect, options );
}
speed = speed || options.duration;
speed = $.fx.off ? 0 : typeof speed == 'number'
? speed : speed in $.fx.speeds ? $.fx.speeds[speed] : $.fx.speeds._default;
effect.duration = $.fx.off ? 0 : typeof speed == 'number'
? speed : speed in $.fx.speeds ? $.fx.speeds[ speed ] : $.fx.speeds._default;
callback = callback || options.complete;
effect.complete = callback || options.complete;
return [effect, options, speed, callback];
return effect;
}
function standardSpeed( speed ) {
@@ -460,73 +496,68 @@ function standardSpeed( speed ) {
}
$.fn.extend({
effect: function(effect, options, speed, callback) {
var args = _normalizeArguments.apply(this, arguments),
// TODO: make effects take actual parameters instead of a hash
args2 = {
options: args[1],
duration: args[2],
callback: args[3]
},
mode = args2.options.mode,
effectMethod = $.effects[effect];
effect: function( effect, options, speed, callback ) {
var args = _normalizeArguments.apply( this, arguments ),
mode = args.mode,
effectMethod = $.effects[ args.effect ];
if ( $.fx.off || !effectMethod ) {
// delegate to the original method (e.g., .show()) if possible
if ( mode ) {
return this[ mode ]( args2.duration, args2.callback );
return this[ mode ]( args.duration, args.callback );
} else {
return this.each(function() {
if ( args2.callback ) {
args2.callback.call( this );
return this.each( function() {
if ( args.callback ) {
args.callback.call( this );
}
});
}
}
return effectMethod.call(this, args2);
return effectMethod.call( this, args );
},
_show: $.fn.show,
show: function(speed) {
show: function( speed ) {
if ( standardSpeed( speed ) ) {
return this._show.apply(this, arguments);
return this._show.apply( this, arguments );
} else {
var args = _normalizeArguments.apply(this, arguments);
args[1].mode = 'show';
return this.effect.apply(this, args);
var args = _normalizeArguments.apply( this, arguments );
args.mode = 'show';
return this.effect.call( this, args );
}
},
_hide: $.fn.hide,
hide: function(speed) {
hide: function( speed ) {
if ( standardSpeed( speed ) ) {
return this._hide.apply(this, arguments);
return this._hide.apply( this, arguments );
} else {
var args = _normalizeArguments.apply(this, arguments);
args[1].mode = 'hide';
return this.effect.apply(this, args);
var args = _normalizeArguments.apply( this, arguments );
args.mode = 'hide';
return this.effect.call( this, args );
}
},
// jQuery core overloads toggle and creates _toggle
__toggle: $.fn.toggle,
toggle: function(speed) {
toggle: function( speed ) {
if ( standardSpeed( speed ) || typeof speed === "boolean" || $.isFunction( speed ) ) {
return this.__toggle.apply(this, arguments);
return this.__toggle.apply( this, arguments );
} else {
var args = _normalizeArguments.apply(this, arguments);
args[1].mode = 'toggle';
return this.effect.apply(this, args);
var args = _normalizeArguments.apply( this, arguments );
args.mode = 'toggle';
return this.effect.call( this, args );
}
},
// helper functions
cssUnit: function(key) {
var style = this.css(key), val = [];
$.each( ['em','px','%','pt'], function(i, unit){
if(style.indexOf(unit) > 0)
val = [parseFloat(style), unit];
var style = this.css( key ),
val = [];
$.each( [ 'em', 'px', '%', 'pt' ], function( i, unit ) {
if ( style.indexOf( unit ) > 0 )
val = [ parseFloat( style ), unit ];
});
return val;
}
@@ -578,136 +609,155 @@ $.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);
swing: function ( x, t, b, c, d ) {
return $.easing[ $.easing.def ]( x, t, b, c, d );
},
easeInQuad: function (x, t, b, c, d) {
return c*(t/=d)*t + b;
easeInQuad: function ( x, t, b, c, d ) {
return c * ( t /= d ) * t + b;
},
easeOutQuad: function (x, t, b, c, d) {
return -c *(t/=d)*(t-2) + b;
easeOutQuad: function ( x, t, b, c, d ) {
return -c * ( t /= d ) * ( t - 2 ) + b;
},
easeInOutQuad: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t + b;
return -c/2 * ((--t)*(t-2) - 1) + b;
easeInOutQuad: function ( x, t, b, c, d ) {
if ( ( t /= d / 2 ) < 1 ) return c / 2 * t * t + b;
return -c / 2 * ( ( --t ) * ( t-2 ) - 1) + b;
},
easeInCubic: function (x, t, b, c, d) {
return c*(t/=d)*t*t + b;
easeInCubic: function ( x, t, b, c, d ) {
return c * ( t /= d ) * t * t + b;
},
easeOutCubic: function (x, t, b, c, d) {
return c*((t=t/d-1)*t*t + 1) + b;
easeOutCubic: function ( x, t, b, c, d ) {
return c * ( ( t = t / d - 1 ) * t * t + 1 ) + b;
},
easeInOutCubic: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t + b;
return c/2*((t-=2)*t*t + 2) + b;
easeInOutCubic: function ( x, t, b, c, d ) {
if ( ( t /= d / 2 ) < 1 ) return c / 2 * t * t * t + b;
return c / 2 * ( ( t -= 2 ) * t * t + 2) + b;
},
easeInQuart: function (x, t, b, c, d) {
return c*(t/=d)*t*t*t + b;
easeInQuart: function ( x, t, b, c, d ) {
return c * ( t /= d ) * t * t * t + b;
},
easeOutQuart: function (x, t, b, c, d) {
return -c * ((t=t/d-1)*t*t*t - 1) + b;
easeOutQuart: function ( x, t, b, c, d ) {
return -c * ( ( t = t / d - 1 ) * t * t * t - 1) + b;
},
easeInOutQuart: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
return -c/2 * ((t-=2)*t*t*t - 2) + b;
easeInOutQuart: function ( x, t, b, c, d ) {
if ( (t /= d / 2 ) < 1 ) return c / 2 * t * t * t * t + b;
return -c / 2 * ( ( t -= 2 ) * t * t * t - 2) + b;
},
easeInQuint: function (x, t, b, c, d) {
return c*(t/=d)*t*t*t*t + b;
easeInQuint: function ( x, t, b, c, d ) {
return c * ( t /= d ) * t * t * t * t + b;
},
easeOutQuint: function (x, t, b, c, d) {
return c*((t=t/d-1)*t*t*t*t + 1) + b;
easeOutQuint: function ( x, t, b, c, d ) {
return c * ( ( t = t / d - 1 ) * t * t * t * t + 1) + b;
},
easeInOutQuint: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
return c/2*((t-=2)*t*t*t*t + 2) + b;
easeInOutQuint: function ( x, t, b, c, d ) {
if ( ( t /= d / 2 ) < 1 ) return c / 2 * t * t * t * t * t + b;
return c / 2 * ( ( t -= 2 ) * t * t * t * t + 2) + b;
},
easeInSine: function (x, t, b, c, d) {
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
easeInSine: function ( x, t, b, c, d ) {
return -c * Math.cos( t / d * ( Math.PI / 2 ) ) + c + b;
},
easeOutSine: function (x, t, b, c, d) {
return c * Math.sin(t/d * (Math.PI/2)) + b;
easeOutSine: function ( x, t, b, c, d ) {
return c * Math.sin( t / d * ( Math.PI /2 ) ) + b;
},
easeInOutSine: function (x, t, b, c, d) {
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
easeInOutSine: function ( x, t, b, c, d ) {
return -c / 2 * ( Math.cos( Math.PI * t / d ) - 1 ) + b;
},
easeInExpo: function (x, t, b, c, d) {
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
easeInExpo: function ( x, t, b, c, d ) {
return ( t==0 ) ? b : c * Math.pow( 2, 10 * ( t / d - 1) ) + b;
},
easeOutExpo: function (x, t, b, c, d) {
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
easeOutExpo: function ( x, t, b, c, d ) {
return ( t==d ) ? b + c : c * ( -Math.pow( 2, -10 * t / d) + 1) + b;
},
easeInOutExpo: function (x, t, b, c, d) {
if (t==0) return b;
if (t==d) return b+c;
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
easeInOutExpo: function ( x, t, b, c, d ) {
if ( t==0 ) return b;
if ( t==d ) return b + c;
if ( ( t /= d / 2) < 1) return c / 2 * Math.pow( 2, 10 * (t - 1) ) + b;
return c / 2 * ( -Math.pow( 2, -10 * --t ) + 2 ) + b;
},
easeInCirc: function (x, t, b, c, d) {
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
easeInCirc: function ( x, t, b, c, d ) {
return -c * ( Math.sqrt( 1 - ( t /= d ) * t ) - 1 ) + b;
},
easeOutCirc: function (x, t, b, c, d) {
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
easeOutCirc: function ( x, t, b, c, d ) {
return c * Math.sqrt( 1 - ( t = t / d - 1 ) * t ) + b;
},
easeInOutCirc: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
easeInOutCirc: function ( x, t, b, c, d ) {
if ( ( t /= d / 2) < 1 ) return -c / 2 * ( Math.sqrt( 1 - t * t ) - 1 ) + b;
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);
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);
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);
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;
},
easeInBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c*(t/=d)*t*((s+1)*t - s) + b;
},
easeOutBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
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;
},
easeInBounce: function (x, t, b, c, d) {
return c - $.easing.easeOutBounce (x, d-t, 0, c, d) + b;
},
easeOutBounce: function (x, t, b, c, d) {
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
easeInElastic: function ( x, t, b, c, d ) {
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 {
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
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,
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,
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;
},
easeInBack: function ( x, t, b, c, d, s ) {
if ( s == undefined ) s = 1.70158;
return c * ( t /= d ) * t * ( ( s+1 ) * t - s ) + b;
},
easeOutBack: function ( x, t, b, c, d, s ) {
if ( s == undefined ) s = 1.70158;
return c * ( ( t = t / d - 1 ) * t * ( ( s + 1 ) * t + s) + 1) + b;
},
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;
},
easeInBounce: function ( x, t, b, c, d ) {
return c - $.easing.easeOutBounce( x, d - t, 0, c, d ) + b;
},
easeOutBounce: function ( x, t, b, c, d ) {
if ( ( t /= d ) < ( 1 / 2.75 ) ) {
return c * ( 7.5625 * t * t ) + b;
} else if ( t < ( 2 / 2.75 ) ) {
return c * ( 7.5625 * ( t -= ( 1.5 / 2.75 ) ) * t + .75 ) + b;
} else if ( t < ( 2.5 / 2.75 ) ) {
return c * ( 7.5625 * ( t -= ( 2.25/ 2.75 ) ) * t + .9375 ) + b;
} else {
return c * ( 7.5625 * ( t -= ( 2.625 / 2.75 ) ) * t + .984375 ) + b;
}
},
easeInOutBounce: function (x, t, b, c, d) {
if (t < d/2) return $.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
return $.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
easeInOutBounce: function ( x, t, b, c, d ) {
if ( t < d / 2 ) return $.easing.easeInBounce( x, t * 2, 0, c, d ) * .5 + b;
return $.easing.easeOutBounce( x, t * 2 - d, 0, c, d ) * .5 + c * .5 + b;
}
});

View File

@@ -12,36 +12,50 @@
*/
(function( $, undefined ) {
$.effects.drop = function(o) {
$.effects.drop = function( o ) {
return this.queue(function() {
return this.queue( function() {
// Create element
var el = $(this), props = ['position','top','bottom','left','right','opacity'];
// Set options
var mode = $.effects.setMode(el, o.options.mode || 'hide'); // Set Mode
var direction = o.options.direction || 'left'; // Default Direction
var el = $( this ),
props = [ 'position', 'top', 'bottom', 'left', 'right', 'opacity' ],
mode = $.effects.setMode( el, o.mode || 'hide' ),
direction = o.direction || 'left',
ref = ( direction == 'up' || direction == 'down' ) ? 'top' : 'left',
motion = ( direction == 'up' || direction == 'left' ) ? 'pos' : 'neg',
animation = {
opacity: mode == 'show' ? 1 : 0
},
distance;
// Adjust
$.effects.save(el, props); el.show(); // Save & Show
$.effects.createWrapper(el); // Create Wrapper
var ref = (direction == 'up' || direction == 'down') ? 'top' : 'left';
var motion = (direction == 'up' || direction == 'left') ? 'pos' : 'neg';
var distance = o.options.distance || (ref == 'top' ? el.outerHeight({margin:true}) / 2 : el.outerWidth({margin:true}) / 2);
if (mode == 'show') el.css('opacity', 0).css(ref, motion == 'pos' ? -distance : distance); // Shift
$.effects.save( el, props );
el.show();
$.effects.createWrapper( el );
distance = o.distance || el[ ref == 'top' ? 'outerHeight': 'outerWidth' ]({ margin: true }) / 2;
if ( mode == 'show' ) {
el
.css( 'opacity', 0 )
.css( ref, motion == 'pos' ? -distance : distance );
}
// Animation
var animation = {opacity: mode == 'show' ? 1 : 0};
animation[ref] = (mode == 'show' ? (motion == 'pos' ? '+=' : '-=') : (motion == 'pos' ? '-=' : '+=')) + distance;
animation[ ref ] = ((mode == 'show') ? (motion == 'pos' ? '+=' : '-=') : (motion == 'pos' ? '-=' : '+=')) + distance;
// Animate
el.animate(animation, { queue: false, duration: o.duration, easing: o.options.easing, complete: function() {
if(mode == 'hide') el.hide(); // Hide
$.effects.restore(el, props); $.effects.removeWrapper(el); // Restore
if(o.callback) o.callback.apply(this, arguments); // Callback
el.dequeue();
}});
el.animate( animation, {
queue: false,
duration: o.duration,
easing: o.easing,
complete: function() {
mode == 'hide' && el.hide();
$.effects.restore( el, props );
$.effects.removeWrapper( el );
$.isFunction( o.complete ) && o.complete.apply(this, arguments);
el.dequeue();
}
});
});

View File

@@ -12,64 +12,63 @@
*/
(function( $, undefined ) {
$.effects.explode = function(o) {
$.effects.explode = function( o ) {
return this.queue(function() {
return this.queue( function() {
var rows = o.options.pieces ? Math.round(Math.sqrt(o.options.pieces)) : 3;
var cells = o.options.pieces ? Math.round(Math.sqrt(o.options.pieces)) : 3;
var rows = o.pieces ? Math.round(Math.sqrt(o.pieces)) : 3,
cells = rows,
el = $( this ).show().css( 'visibility', 'hidden' ),
mode = $.effects.setMode( el, o.mode || 'hide' ),
offset = el.offset(),
width = el.outerWidth( true ),
height = el.outerHeight( true );
o.options.mode = o.options.mode == 'toggle' ? ($(this).is(':visible') ? 'hide' : 'show') : o.options.mode;
var el = $(this).show().css('visibility', 'hidden');
var offset = el.offset();
//Substract the margins - not fixing the problem yet.
offset.top -= parseInt( el.css( "marginTop" ), 10 ) || 0;
offset.left -= parseInt( el.css( "marginLeft" ), 10 ) || 0;
//Substract the margins - not fixing the problem yet.
offset.top -= parseInt(el.css("marginTop"),10) || 0;
offset.left -= parseInt(el.css("marginLeft"),10) || 0;
var width = el.outerWidth(true);
var height = el.outerHeight(true);
for(var i=0;i<rows;i++) { // =
for(var j=0;j<cells;j++) { // ||
el
.clone()
.appendTo('body')
.wrap('<div></div>')
.css({
position: 'absolute',
visibility: 'visible',
left: -j*(width/cells),
top: -i*(height/rows)
})
.parent()
.addClass('ui-effects-explode')
.css({
position: 'absolute',
overflow: 'hidden',
width: width/cells,
height: height/rows,
left: offset.left + j*(width/cells) + (o.options.mode == 'show' ? (j-Math.floor(cells/2))*(width/cells) : 0),
top: offset.top + i*(height/rows) + (o.options.mode == 'show' ? (i-Math.floor(rows/2))*(height/rows) : 0),
opacity: o.options.mode == 'show' ? 0 : 1
}).animate({
left: offset.left + j*(width/cells) + (o.options.mode == 'show' ? 0 : (j-Math.floor(cells/2))*(width/cells)),
top: offset.top + i*(height/rows) + (o.options.mode == 'show' ? 0 : (i-Math.floor(rows/2))*(height/rows)),
opacity: o.options.mode == 'show' ? 1 : 0
}, o.duration || 500);
for( var i = 0; i < rows ; i++ ) { // =
for( var j = 0; j < cells ; j++ ) { // ||
el
.clone()
.appendTo('body')
.wrap('<div></div>')
.css({
position: 'absolute',
visibility: 'visible',
left: -j*(width/cells),
top: -i*(height/rows)
})
.parent()
.addClass('ui-effects-explode')
.css({
position: 'absolute',
overflow: 'hidden',
width: width/cells,
height: height/rows,
left: offset.left + j*(width/cells) + (o.mode == 'show' ? (j-Math.floor(cells/2))*(width/cells) : 0),
top: offset.top + i*(height/rows) + (o.mode == 'show' ? (i-Math.floor(rows/2))*(height/rows) : 0),
opacity: mode == 'show' ? 0 : 1
}).animate({
left: offset.left + j*(width/cells) + (o.mode == 'show' ? 0 : (j-Math.floor(cells/2))*(width/cells)),
top: offset.top + i*(height/rows) + (o.mode == 'show' ? 0 : (i-Math.floor(rows/2))*(height/rows)),
opacity: mode == 'show' ? 1 : 0
}, o.duration || 500);
}
}
}
// Set a timeout, to call the callback approx. when the other animations have finished
setTimeout(function() {
// Set a timeout, to call the callback approx. when the other animations have finished
setTimeout(function() {
o.options.mode == 'show' ? el.css({ visibility: 'visible' }) : el.css({ visibility: 'visible' }).hide();
if(o.callback) o.callback.apply(el[0]); // Callback
el.dequeue();
el.css({ visibility: 'visible' });
mode != 'show' && el.hide();
$.isFunction( o.complete ) && o.complete.apply( el[ 0 ] );
el.dequeue();
$('div.ui-effects-explode').remove();
}, o.duration || 500);
// Note: This is removing all exploding peices from the dom, rather than the ones for this animation only... Ticket# 6022
$('div.ui-effects-explode').remove();
}, o.duration || 500);
});

View File

@@ -12,18 +12,20 @@
*/
(function( $, undefined ) {
$.effects.fade = function(o) {
return this.queue(function() {
var elem = $(this),
mode = $.effects.setMode(elem, o.options.mode || 'hide');
$.effects.fade = function( o ) {
return this.queue( function() {
var el = $( this ),
mode = $.effects.setMode( el, o.mode || 'hide' );
elem.animate({ opacity: mode }, {
el.animate({
opacity: mode
}, {
queue: false,
duration: o.duration,
easing: o.options.easing,
easing: o.easing,
complete: function() {
(o.callback && o.callback.apply(this, arguments));
elem.dequeue();
$.isFunction( o.complete ) && o.complete.apply( this, arguments );
el.dequeue();
}
});
});

View File

@@ -12,42 +12,59 @@
*/
(function( $, undefined ) {
$.effects.fold = function(o) {
$.effects.fold = function( o ) {
return this.queue(function() {
return this.queue( function() {
// Create element
var el = $(this), props = ['position','top','bottom','left','right'];
var el = $( this ),
props = ['position','top','bottom','left','right'],
mode = $.effects.setMode(el, o.mode || 'hide'),
size = o.size || 15,
percent = /([0-9]+)%/.exec(size),
horizFirst = !!o.horizFirst,
widthFirst = ((mode == 'show') != horizFirst),
ref = widthFirst ? ['width', 'height'] : ['height', 'width'],
duration = o.duration / 2,
wrapper, distance;
// Set options
var mode = $.effects.setMode(el, o.options.mode || 'hide'); // Set Mode
var size = o.options.size || 15; // Default fold size
var horizFirst = !(!o.options.horizFirst); // Ensure a boolean value
var duration = o.duration ? o.duration / 2 : $.fx.speeds._default / 2;
$.effects.save( el, props );
el.show();
// Adjust
$.effects.save(el, props); el.show(); // Save & Show
var wrapper = $.effects.createWrapper(el).css({overflow:'hidden'}); // Create Wrapper
var widthFirst = ((mode == 'show') != horizFirst);
var ref = widthFirst ? ['width', 'height'] : ['height', 'width'];
var distance = widthFirst ? [wrapper.width(), wrapper.height()] : [wrapper.height(), wrapper.width()];
var percent = /([0-9]+)%/.exec(size);
if(percent) size = parseInt(percent[1],10) / 100 * distance[mode == 'hide' ? 0 : 1];
if(mode == 'show') wrapper.css(horizFirst ? {height: 0, width: size} : {height: size, width: 0}); // Shift
// Create Wrapper
wrapper = $.effects.createWrapper( el ).css({
overflow: 'hidden'
});
distance = widthFirst ?
[ wrapper.width(), wrapper.height() ] :
[ wrapper.height(), wrapper.width() ];
if ( percent ) {
size = parseInt( percent[ 1 ], 10 ) / 100 * distance[ ( mode == 'hide') ? 0 : 1 ];
}
mode == 'show' && wrapper.css( horizFirst ? {
height: 0,
width: size
} : {
height: size,
width: 0
});
// Animation
var animation1 = {}, animation2 = {};
animation1[ref[0]] = mode == 'show' ? distance[0] : size;
animation2[ref[1]] = mode == 'show' ? distance[1] : 0;
animation1[ ref[ 0 ] ] = mode == 'show' ? distance[ 0 ] : size;
animation2[ ref[ 1 ] ] = mode == 'show' ? distance[ 1 ] : 0;
// Animate
wrapper.animate(animation1, duration, o.options.easing)
.animate(animation2, duration, o.options.easing, function() {
if(mode == 'hide') el.hide(); // Hide
$.effects.restore(el, props); $.effects.removeWrapper(el); // Restore
if(o.callback) o.callback.apply(el[0], arguments); // Callback
el.dequeue();
});
wrapper
.animate( animation1, duration, o.easing )
.animate( animation2, duration, o.easing, function() {
(mode == 'hide') && el.hide();
$.effects.restore( el, props );
$.effects.removeWrapper( el );
jQuery.isFunction(o.complete) && o.complete.apply( el[ 0 ], arguments );
el.dequeue();
});
});

View File

@@ -12,35 +12,36 @@
*/
(function( $, undefined ) {
$.effects.highlight = function(o) {
return this.queue(function() {
var elem = $(this),
props = ['backgroundImage', 'backgroundColor', 'opacity'],
mode = $.effects.setMode(elem, o.options.mode || 'show'),
$.effects.highlight = function( o ) {
return this.queue( function() {
var elem = $( this ),
props = [ 'backgroundImage', 'backgroundColor', 'opacity' ],
mode = $.effects.setMode( elem, o.mode || 'show' ),
animation = {
backgroundColor: elem.css('backgroundColor')
backgroundColor: elem.css( 'backgroundColor' )
};
if (mode == 'hide') {
animation.opacity = 0;
}
$.effects.save(elem, props);
$.effects.save( elem, props );
elem
.show()
.css({
backgroundImage: 'none',
backgroundColor: o.options.color || '#ffff99'
backgroundColor: o.color || '#ffff99'
})
.animate(animation, {
.animate( animation, {
queue: false,
duration: o.duration,
easing: o.options.easing,
easing: o.easing,
complete: function() {
(mode == 'hide' && elem.hide());
$.effects.restore(elem, props);
(mode == 'show' && !$.support.opacity && this.style.removeAttribute('filter'));
(o.callback && o.callback.apply(this, arguments));
$.effects.restore( elem, props );
(mode == 'show' && !$.support.opacity && this.style.removeAttribute( 'filter' ));
jQuery.isFunction(o.complete) && o.complete.apply(this, arguments);
elem.dequeue();
}
});

View File

@@ -12,39 +12,40 @@
*/
(function( $, undefined ) {
$.effects.pulsate = function(o) {
return this.queue(function() {
var elem = $(this),
mode = $.effects.setMode(elem, o.options.mode || 'show'),
times = ((o.options.times || 5) * 2) - 1,
duration = o.duration ? o.duration / 2 : $.fx.speeds._default / 2,
isVisible = elem.is(':visible'),
animateTo = 0;
$.effects.pulsate = function( o ) {
return this.queue( function() {
var elem = $( this ),
mode = $.effects.setMode( elem, o.mode || 'show' ),
times = ( ( o.times || 5 ) * 2 ) - 1,
duration = o.duration / 2,
isVisible = elem.is( ':visible' ),
animateTo = 0,
i;
if (!isVisible) {
if ( !isVisible ) {
elem.css('opacity', 0).show();
animateTo = 1;
}
if ((mode == 'hide' && isVisible) || (mode == 'show' && !isVisible)) {
if ( ( mode == 'hide' && isVisible ) || ( mode == 'show' && !isVisible ) ) {
times--;
}
for (var i = 0; i < times; i++) {
elem.animate({ opacity: animateTo }, duration, o.options.easing);
animateTo = (animateTo + 1) % 2;
for ( i = 0; i < times; i++ ) {
elem.animate({
opacity: animateTo
}, duration, o.easing );
animateTo = ( animateTo + 1 ) % 2;
}
elem.animate({ opacity: animateTo }, duration, o.options.easing, function() {
elem.animate({
opacity: animateTo
}, duration, o.easing, function() {
if (animateTo == 0) {
elem.hide();
}
(o.callback && o.callback.apply(this, arguments));
});
elem
.queue('fx', function() { elem.dequeue(); })
.dequeue();
(o.complete && o.complete.apply(this, arguments));
}).dequeue();
});
};

View File

@@ -12,15 +12,19 @@
*/
(function( $, undefined ) {
$.effects.puff = function(o) {
return this.queue(function() {
var elem = $(this),
mode = $.effects.setMode(elem, o.options.mode || 'hide'),
percent = parseInt(o.options.percent, 10) || 150,
$.effects.puff = function( o ) {
return this.queue( function() {
var elem = $( this ),
mode = $.effects.setMode( elem, o.mode || 'hide' ),
percent = parseInt( o.percent, 10 ) || 150,
factor = percent / 100,
original = { height: elem.height(), width: elem.width() };
original = {
height: elem.height(),
width: elem.width()
};
$.extend(o.options, {
$.extend(o, {
effect: 'scale',
fade: true,
mode: mode,
percent: mode == 'hide' ? percent : 100,
@@ -32,144 +36,212 @@ $.effects.puff = function(o) {
}
});
elem.effect('scale', o.options, o.duration, o.callback);
elem.dequeue();
elem.effect( o ).dequeue();
});
};
$.effects.scale = function(o) {
$.effects.scale = function( o ) {
return this.queue(function() {
return this.queue( function() {
// Create element
var el = $(this);
var el = $( this ),
options = $.extend( true, {}, o ),
mode = $.effects.setMode( el, o.mode || 'effect' ),
percent = parseInt( o.percent, 10 ) || ( parseInt( o.percent, 10 ) == 0 ? 0 : ( mode == 'hide' ? 0 : 100 ) ),
direction = o.direction || 'both',
origin = o.origin,
original = {
height: el.height(),
width: el.width()
},
factor = {
y: direction != 'horizontal' ? (percent / 100) : 1,
x: direction != 'vertical' ? (percent / 100) : 1
};
// Set options
var options = $.extend(true, {}, o.options);
var mode = $.effects.setMode(el, o.options.mode || 'effect'); // Set Mode
var percent = parseInt(o.options.percent,10) || (parseInt(o.options.percent,10) == 0 ? 0 : (mode == 'hide' ? 0 : 100)); // Set default scaling percent
var direction = o.options.direction || 'both'; // Set default axis
var origin = o.options.origin; // The origin of the scaling
if (mode != 'effect') { // Set default origin and restore for show/hide
// We are going to pass this effect to the size effect:
options.effect = "size";
// Set default origin and restore for show/hide
if ( mode != 'effect' ) {
options.origin = origin || ['middle','center'];
options.restore = true;
}
var original = {height: el.height(), width: el.width()}; // Save original
el.from = o.options.from || (mode == 'show' ? {height: 0, width: 0} : original); // Default from state
// Adjust
var factor = { // Set scaling factor
y: direction != 'horizontal' ? (percent / 100) : 1,
x: direction != 'vertical' ? (percent / 100) : 1
options.from = o.from || ( mode == 'show' ? { height: 0, width: 0 } : original );
options.to = {
height: original.height * factor.y,
width: original.width * factor.x
};
if ( options.fade ) { // Fade option to support puff
if ( mode == 'show' ) {
options.from.opacity = 0;
options.to.opacity = 1;
}
if ( mode == 'hide' ) {
options.from.opacity = 1;
options.to.opacity = 0;
}
};
el.to = {height: original.height * factor.y, width: original.width * factor.x}; // Set to state
if (o.options.fade) { // Fade option to support puff
if (mode == 'show') {el.from.opacity = 0; el.to.opacity = 1;};
if (mode == 'hide') {el.from.opacity = 1; el.to.opacity = 0;};
};
// Animation
options.from = el.from; options.to = el.to; options.mode = mode;
// Animate
el.effect('size', options, o.duration, o.callback);
el.dequeue();
el.effect(options).dequeue();
});
};
$.effects.size = function(o) {
return this.queue(function() {
$.effects.size = function( o ) {
return this.queue( function() {
// Create element
var el = $(this), props = ['position','top','bottom','left','right','width','height','overflow','opacity'];
var props1 = ['position','top','bottom','left','right','overflow','opacity']; // Always restore
var props2 = ['width','height','overflow']; // Copy for children
var cProps = ['fontSize'];
var vProps = ['borderTopWidth', 'borderBottomWidth', 'paddingTop', 'paddingBottom'];
var hProps = ['borderLeftWidth', 'borderRightWidth', 'paddingLeft', 'paddingRight'];
var el = $( this ),
props = [ 'position', 'top', 'bottom', 'left', 'right', 'width', 'height', 'overflow', 'opacity' ],
// Always restore
props1 = [ 'position', 'top', 'bottom', 'left', 'right', 'overflow', 'opacity' ],
// Copy for children
props2 = [ 'width', 'height', 'overflow' ],
cProps = [ 'fontSize' ],
vProps = [ 'borderTopWidth', 'borderBottomWidth', 'paddingTop', 'paddingBottom' ],
hProps = [ 'borderLeftWidth', 'borderRightWidth', 'paddingLeft', 'paddingRight' ],
// Set options
mode = $.effects.setMode( el, o.mode || 'effect' ),
restore = o.restore || false,
scale = o.scale || 'both',
origin = o.origin,
original = {
height: el.height(),
width: el.width()
},
baseline, factor;
el.from = o.from || original;
el.to = o.to || original;
// Set options
var mode = $.effects.setMode(el, o.options.mode || 'effect'); // Set Mode
var restore = o.options.restore || false; // Default restore
var scale = o.options.scale || 'both'; // Default scale mode
var origin = o.options.origin; // The origin of the sizing
var original = {height: el.height(), width: el.width()}; // Save original
el.from = o.options.from || original; // Default from state
el.to = o.options.to || original; // Default to state
// Adjust
if (origin) { // Calculate baseline shifts
var baseline = $.effects.getBaseline(origin, original);
el.from.top = (original.height - el.from.height) * baseline.y;
el.from.left = (original.width - el.from.width) * baseline.x;
el.to.top = (original.height - el.to.height) * baseline.y;
el.to.left = (original.width - el.to.width) * baseline.x;
baseline = $.effects.getBaseline( origin, original );
el.from.top = ( original.height - el.from.height ) * baseline.y;
el.from.left = ( original.width - el.from.width ) * baseline.x;
el.to.top = ( original.height - el.to.height ) * baseline.y;
el.to.left = ( original.width - el.to.width ) * baseline.x;
}
// Set scaling factor
factor = {
from: {
y: el.from.height / original.height,
x: el.from.width / original.width
},
to: {
y: el.to.height / original.height,
x: el.to.width / original.width
}
};
var factor = { // Set scaling factor
from: {y: el.from.height / original.height, x: el.from.width / original.width},
to: {y: el.to.height / original.height, x: el.to.width / original.width}
};
if (scale == 'box' || scale == 'both') { // Scale the css box
if (factor.from.y != factor.to.y) { // Vertical props scaling
props = props.concat(vProps);
el.from = $.effects.setTransition(el, vProps, factor.from.y, el.from);
el.to = $.effects.setTransition(el, vProps, factor.to.y, el.to);
// Scale the css box
if ( scale == 'box' || scale == 'both' ) {
// Vertical props scaling
if ( factor.from.y != factor.to.y ) {
props = props.concat( vProps );
el.from = $.effects.setTransition( el, vProps, factor.from.y, el.from );
el.to = $.effects.setTransition( el, vProps, factor.to.y, el.to );
};
if (factor.from.x != factor.to.x) { // Horizontal props scaling
props = props.concat(hProps);
el.from = $.effects.setTransition(el, hProps, factor.from.x, el.from);
el.to = $.effects.setTransition(el, hProps, factor.to.x, el.to);
// Horizontal props scaling
if ( factor.from.x != factor.to.x ) {
props = props.concat( hProps );
el.from = $.effects.setTransition( el, hProps, factor.from.x, el.from );
el.to = $.effects.setTransition( el, hProps, factor.to.x, el.to );
};
};
if (scale == 'content' || scale == 'both') { // Scale the content
if (factor.from.y != factor.to.y) { // Vertical props scaling
props = props.concat(cProps);
el.from = $.effects.setTransition(el, cProps, factor.from.y, el.from);
el.to = $.effects.setTransition(el, cProps, factor.to.y, el.to);
// Scale the content
if ( scale == 'content' || scale == 'both' ) {
// Vertical props scaling
if ( factor.from.y != factor.to.y ) {
props = props.concat( cProps );
el.from = $.effects.setTransition( el, cProps, factor.from.y, el.from );
el.to = $.effects.setTransition( el, cProps, factor.to.y, el.to );
};
};
$.effects.save(el, restore ? props : props1); el.show(); // Save & Show
$.effects.createWrapper(el); // Create Wrapper
el.css('overflow','hidden').css(el.from); // Shift
$.effects.save( el, restore ? props : props1 );
el.show();
$.effects.createWrapper( el );
el.css( 'overflow', 'hidden' ).css( el.from );
// Animate
if (scale == 'content' || scale == 'both') { // Scale the children
vProps = vProps.concat(['marginTop','marginBottom']).concat(cProps); // Add margins/font-size
hProps = hProps.concat(['marginLeft','marginRight']); // Add margins
props2 = props.concat(vProps).concat(hProps); // Concat
el.find("*[width]").each(function(){
var child = $(this);
if ( scale == 'content' || scale == 'both' ) { // Scale the children
// Add margins/font-size
vProps = vProps.concat([ 'marginTop', 'marginBottom' ]).concat(cProps);
hProps = hProps.concat([ 'marginLeft', 'marginRight' ]);
props2 = props.concat(vProps).concat(hProps);
el.find( "*[width]" ).each( function(){
var child = $( this ),
c_original = {
height: child.height(),
width: child.width()
};
if (restore) $.effects.save(child, props2);
var c_original = {height: child.height(), width: child.width()}; // Save original
child.from = {height: c_original.height * factor.from.y, width: c_original.width * factor.from.x};
child.to = {height: c_original.height * factor.to.y, width: c_original.width * factor.to.x};
if (factor.from.y != factor.to.y) { // Vertical props scaling
child.from = $.effects.setTransition(child, vProps, factor.from.y, child.from);
child.to = $.effects.setTransition(child, vProps, factor.to.y, child.to);
child.from = {
height: c_original.height * factor.from.y,
width: c_original.width * factor.from.x
};
if (factor.from.x != factor.to.x) { // Horizontal props scaling
child.from = $.effects.setTransition(child, hProps, factor.from.x, child.from);
child.to = $.effects.setTransition(child, hProps, factor.to.x, child.to);
child.to = {
height: c_original.height * factor.to.y,
width: c_original.width * factor.to.x
};
child.css(child.from); // Shift children
child.animate(child.to, o.duration, o.options.easing, function(){
if (restore) $.effects.restore(child, props2); // Restore children
}); // Animate children
// Vertical props scaling
if ( factor.from.y != factor.to.y ) {
child.from = $.effects.setTransition( child, vProps, factor.from.y, child.from );
child.to = $.effects.setTransition( child, vProps, factor.to.y, child.to );
};
// Horizontal props scaling
if ( factor.from.x != factor.to.x ) {
child.from = $.effects.setTransition( child, hProps, factor.from.x, child.from );
child.to = $.effects.setTransition( child, hProps, factor.to.x, child.to );
};
// Animate children
child.css( child.from );
child.animate( child.to, o.duration, o.easing, function() {
// Restore children
if (restore) $.effects.restore( child, props2 );
});
});
};
// Animate
el.animate(el.to, { queue: false, duration: o.duration, easing: o.options.easing, complete: function() {
if (el.to.opacity === 0) {
el.css('opacity', el.from.opacity);
el.animate( el.to, {
queue: false,
duration: o.duration,
easing: o.easing,
complete: function() {
if ( el.to.opacity === 0 ) {
el.css( 'opacity', el.from.opacity );
}
if( mode == 'hide' ) {
el.hide();
}
$.effects.restore( el, restore ? props : props1 );
$.effects.removeWrapper( el );
$.isFunction( o.complete ) && o.complete.apply( this, arguments ); // Callback
el.dequeue();
}
if(mode == 'hide') el.hide(); // Hide
$.effects.restore(el, restore ? props : props1); $.effects.removeWrapper(el); // Restore
if(o.callback) o.callback.apply(this, arguments); // Callback
el.dequeue();
}});
});
});

View File

@@ -12,44 +12,51 @@
*/
(function( $, undefined ) {
$.effects.shake = function(o) {
$.effects.shake = function( o ) {
return this.queue(function() {
return this.queue( function() {
// Create element
var el = $(this), props = ['position','top','bottom','left','right'];
// Set options
var mode = $.effects.setMode(el, o.options.mode || 'effect'); // Set Mode
var direction = o.options.direction || 'left'; // Default direction
var distance = o.options.distance || 20; // Default distance
var times = o.options.times || 3; // Default # of times
var speed = o.duration || o.options.duration || 140; // Default speed per shake
var el = $( this ),
props = [ 'position', 'top', 'bottom', 'left', 'right' ],
mode = $.effects.setMode( el, o.mode || 'effect' ),
direction = o.direction || 'left',
distance = o.distance || 20,
times = o.times || 3,
speed = o.duration || 140,
ref = (direction == 'up' || direction == 'down') ? 'top' : 'left',
motion = (direction == 'up' || direction == 'left') ? 'pos' : 'neg',
animation = {},
animation1 = {},
animation2 = {},
i;
// Adjust
$.effects.save(el, props); el.show(); // Save & Show
$.effects.createWrapper(el); // Create Wrapper
var ref = (direction == 'up' || direction == 'down') ? 'top' : 'left';
var motion = (direction == 'up' || direction == 'left') ? 'pos' : 'neg';
$.effects.save( el, props );
el.show();
$.effects.createWrapper( el ); // Create Wrapper
// Animation
var animation = {}, animation1 = {}, animation2 = {};
animation[ref] = (motion == 'pos' ? '-=' : '+=') + distance;
animation1[ref] = (motion == 'pos' ? '+=' : '-=') + distance * 2;
animation2[ref] = (motion == 'pos' ? '-=' : '+=') + distance * 2;
animation[ ref ] = ( motion == 'pos' ? '-=' : '+=' ) + distance;
animation1[ ref ] = ( motion == 'pos' ? '+=' : '-=' ) + distance * 2;
animation2[ ref ] = ( motion == 'pos' ? '-=' : '+=' ) + distance * 2;
// Animate
el.animate(animation, speed, o.options.easing);
for (var i = 1; i < times; i++) { // Shakes
el.animate(animation1, speed, o.options.easing).animate(animation2, speed, o.options.easing);
el.animate( animation, speed, o.easing );
// Shakes
for ( i = 1; i < times; i++ ) {
el.animate( animation1, speed, o.easing ).animate( animation2, speed, o.easing );
};
el.animate(animation1, speed, o.options.easing).
animate(animation, speed / 2, o.options.easing, function(){ // Last shake
$.effects.restore(el, props); $.effects.removeWrapper(el); // Restore
if(o.callback) o.callback.apply(this, arguments); // Callback
});
el.queue('fx', function() { el.dequeue(); });
el.dequeue();
el
.animate( animation1, speed, o.easing )
.animate( animation, speed / 2, o.easing, function() {
// Last shake
$.effects.restore( el, props );
$.effects.removeWrapper( el );
$.isFunction( o.complete ) && o.complete.apply( this, arguments );
})
.dequeue();
});
};

View File

@@ -12,36 +12,55 @@
*/
(function( $, undefined ) {
$.effects.slide = function(o) {
$.effects.slide = function( o ) {
return this.queue(function() {
return this.queue( function() {
// Create element
var el = $(this), props = ['position','top','bottom','left','right'];
// Set options
var mode = $.effects.setMode(el, o.options.mode || 'show'); // Set Mode
var direction = o.options.direction || 'left'; // Default Direction
var el = $( this ),
props = ['position','top','bottom','left','right'],
mode = $.effects.setMode( el, o.mode || 'show' ),
direction = o.direction || 'left',
ref = (direction == 'up' || direction == 'down') ? 'top' : 'left',
motion = (direction == 'up' || direction == 'left') ? 'pos' : 'neg',
distance,
animation = {};
// Adjust
$.effects.save(el, props); el.show(); // Save & Show
$.effects.createWrapper(el).css({overflow:'hidden'}); // Create Wrapper
var ref = (direction == 'up' || direction == 'down') ? 'top' : 'left';
var motion = (direction == 'up' || direction == 'left') ? 'pos' : 'neg';
var distance = o.options.distance || (ref == 'top' ? el.outerHeight({margin:true}) : el.outerWidth({margin:true}));
if (mode == 'show') el.css(ref, motion == 'pos' ? (isNaN(distance) ? "-" + distance : -distance) : distance); // Shift
$.effects.save( el, props );
el.show();
$.effects.createWrapper( el ).css({
overflow: 'hidden'
});
distance = o.distance || el[ ref == 'top' ? "outerHeight" : "outerWidth" ]({
margin: true
});
if (mode == 'show') {
el.css( ref, motion == 'pos' ? (isNaN(distance) ? "-" + distance : -distance) : distance );
}
// Animation
var animation = {};
animation[ref] = (mode == 'show' ? (motion == 'pos' ? '+=' : '-=') : (motion == 'pos' ? '-=' : '+=')) + distance;
animation[ ref ] = ( mode == 'show' ?
(motion == 'pos' ? '+=' : '-=') :
(motion == 'pos' ? '-=' : '+='))
+ distance;
// Animate
el.animate(animation, { queue: false, duration: o.duration, easing: o.options.easing, complete: function() {
if(mode == 'hide') el.hide(); // Hide
$.effects.restore(el, props); $.effects.removeWrapper(el); // Restore
if(o.callback) o.callback.apply(this, arguments); // Callback
el.dequeue();
}});
el.animate( animation, {
queue: false,
duration: o.duration,
easing: o.easing,
complete: function() {
if ( mode == 'hide' ) {
el.hide();
}
$.effects.restore( el, props );
$.effects.removeWrapper( el );
$.isFunction(o.complete) && o.complete.apply( this, arguments );
el.dequeue();
}
});
});

View File

@@ -12,10 +12,11 @@
*/
(function( $, undefined ) {
$.effects.transfer = function(o) {
return this.queue(function() {
var elem = $(this),
target = $(o.options.to),
$.effects.transfer = function( o ) {
return this.queue( function() {
var elem = $( this ),
target = $( o.to ),
endPosition = target.offset(),
animation = {
top: endPosition.top,
@@ -24,9 +25,9 @@ $.effects.transfer = function(o) {
width: target.innerWidth()
},
startPosition = elem.offset(),
transfer = $('<div class="ui-effects-transfer"></div>')
.appendTo(document.body)
.addClass(o.options.className)
transfer = $( '<div class="ui-effects-transfer"></div>' )
.appendTo( document.body )
.addClass( o.className )
.css({
top: startPosition.top,
left: startPosition.left,
@@ -34,9 +35,9 @@ $.effects.transfer = function(o) {
width: elem.innerWidth(),
position: 'absolute'
})
.animate(animation, o.duration, o.options.easing, function() {
.animate( animation, o.duration, o.easing, function() {
transfer.remove();
(o.callback && o.callback.apply(elem[0], arguments));
$.isFunction( o.complete ) && o.complete.apply(elem[0], arguments);
elem.dequeue();
});
});