effects.*: style guidance

This commit is contained in:
gnarf 2011-03-06 18:48:14 -06:00
parent 9c771b8f8b
commit 576cd0b92b
3 changed files with 68 additions and 47 deletions

View File

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

View File

@ -30,54 +30,70 @@ $.effects.bounce = function(o) {
// utility: // utility:
ref = ( direction == 'up' || direction == 'down' ) ? 'top' : 'left', ref = ( direction == 'up' || direction == 'down' ) ? 'top' : 'left',
motion = ( direction == 'up' || direction == 'left' ), // true is positive motion = ( direction == 'up' || direction == 'left' ), // true is positive
distance = o.distance || false; i, animation, animation1, animation2;
// Avoid touching opacity to prevent clearType and PNG issues in IE // Avoid touching opacity to prevent clearType and PNG issues in IE
if ( rshowhide.test(mode) ) props.push('opacity'); if ( rshowhide.test( mode ) ) {
props.push( 'opacity' );
}
$.effects.save(el, props); el.show(); // Save & Show $.effects.save( el, props );
$.effects.createWrapper(el); // Create Wrapper el.show();
$.effects.createWrapper( el ); // Create Wrapper
if ( !distance ) { if ( !distance ) {
distance = el[ref == 'top' ? 'outerHeight' : 'outerWidth' ]( { margin:true } ) / 3; distance = el[ ref == 'top' ? 'outerHeight' : 'outerWidth' ]({ margin:true }) / 3;
} }
if (mode == 'show') el.css('opacity', 0).css(ref, motion ? -distance : distance ); // Shift if ( mode == 'show' ) el.css( 'opacity', 0 ).css( ref, motion ? -distance : distance ); // Shift
if (mode == 'hide') distance = distance / (times * 2); if ( mode == 'hide' ) distance = distance / (times * 2);
if (mode != 'hide') times--; if ( mode != 'hide' ) times--;
// Animate // Animate
if (mode == 'show') { // Show Bounce if ( mode == 'show' ) {
var animation = { opacity: 1 }; animation = {
animation[ref] = (motion ? '+=' : '-=') + distance; opacity: 1
};
animation[ ref ] = ( motion ? '+=' : '-=' ) + distance;
el.animate( animation, speed / 2, o.easing); el.animate( animation, speed / 2, o.easing);
distance = distance / 2; distance = distance / 2;
times--; times--;
}; };
for (var i = 0; i < times; i++) { // Bounces
var animation1 = {}, animation2 = {}; // Bounces
animation1[ref] = (motion ? '-=' : '+=') + distance; for (i = 0; i < times; i++) {
animation2[ref] = (motion ? '+=' : '-=') + distance; animation1 = {};
animation2 = {};
animation1[ ref ] = ( motion ? '-=' : '+=' ) + distance;
animation2[ ref ] = ( motion ? '+=' : '-=' ) + distance;
el.animate( animation1, speed / 2, o.easing ).animate( animation2, speed / 2, o.easing ); el.animate( animation1, speed / 2, o.easing ).animate( animation2, speed / 2, o.easing );
distance = (mode == 'hide') ? distance * 2 : distance / 2; distance = ( mode == 'hide' ) ? distance * 2 : distance / 2;
}; }
if (mode == 'hide') { // Last Bounce
var animation = { opacity: 0 }; // Last Bounce
animation[ref] = (motion ? '-=' : '+=') + distance; if ( mode == 'hide' ) {
animation = {
opacity: 0
};
animation[ ref ] = ( motion ? '-=' : '+=' ) + distance;
el.animate( animation, speed / 2, o.easing, function(){ el.animate( animation, speed / 2, o.easing, function(){
el.hide(); // Hide el.hide();
$.effects.restore( el, props ); $.effects.removeWrapper( el ); // Restore $.effects.restore( el, props );
if ( o.complete ) o.complete.apply( this, arguments ); // Callback $.effects.removeWrapper( el );
$.isFunction( o.complete ) && o.complete.apply( this, arguments );
}); });
} else { } else {
var animation1 = {}, animation2 = {}; animation1 = {};
animation1[ref] = (motion ? '-=' : '+=') + distance; animation2 = {};
animation2[ref] = (motion ? '+=' : '-=') + distance; animation1[ ref ] = ( motion ? '-=' : '+=' ) + distance;
el.animate(animation1, speed / 2, o.easing).animate(animation2, speed / 2, o.easing, function(){ animation2[ ref ] = ( motion ? '+=' : '-=' ) + distance;
$.effects.restore(el, props); $.effects.removeWrapper(el); // Restore el
if(o.complete) o.complete.apply(this, arguments); // Callback .animate( animation1, speed / 2, o.easing )
}); .animate( animation2, speed / 2, o.easing, function() {
}; $.effects.restore( el, props );
el.queue('fx', function(next) { next(); }); $.effects.removeWrapper( el );
$.isFunction( o.complete ) && o.complete.apply( this, arguments );
});
}
el.dequeue(); el.dequeue();
}); });

View File

@ -49,8 +49,8 @@ $.effects.drop = function( o ) {
easing: o.easing, easing: o.easing,
complete: function() { complete: function() {
mode == 'hide' && el.hide(); mode == 'hide' && el.hide();
$.effects.restore(el, props); $.effects.restore( el, props );
$.effects.removeWrapper(el); $.effects.removeWrapper( el );
$.isFunction( o.complete ) && o.complete.apply(this, arguments); $.isFunction( o.complete ) && o.complete.apply(this, arguments);
el.dequeue(); el.dequeue();
} }