Skip to content

Commit

Permalink
effects.*: style guidance
Browse files Browse the repository at this point in the history
  • Loading branch information
@gnarf
gnarf committed Mar 7, 2011
1 parent 9c771b8 commit 576cd0b
Show file tree
Hide file tree
Showing 3 changed files with 68 additions and 47 deletions.
31 changes: 18 additions & 13 deletions ui/jquery.effects.blind.js
View file
Expand Up @@ -12,31 +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;

// Adjust
$.effects.save(el, props); el.show(); // Save & Show

wrapper = $.effects.createWrapper(el).css({overflow:'hidden'}); // Create Wrapper
$.effects.save( el, props );
el.show();
wrapper = $.effects.createWrapper( el ).css({
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
wrapper.animate( animation, o.duration, o.easing, function() {
(mode == 'hide' && el.hide()); // Hide
$.effects.restore(el, props); $.effects.removeWrapper(el); // Restore
(o.complete && o.complete.apply(el[0], arguments)); // Callback
( mode == 'hide' && el.hide() );
$.effects.restore( el, props );
$.effects.removeWrapper( el );
$.isFunction( o.complete ) && o.complete.apply( el[ 0 ], arguments );
el.dequeue();
});

Expand Down
80 changes: 48 additions & 32 deletions ui/jquery.effects.bounce.js
View file
Expand Up @@ -30,54 +30,70 @@ $.effects.bounce = function(o) {
// utility:
ref = ( direction == 'up' || direction == 'down' ) ? 'top' : 'left',
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
if ( rshowhide.test(mode) ) props.push('opacity');
if ( rshowhide.test( mode ) ) {
props.push( 'opacity' );
}

$.effects.save(el, props); el.show(); // Save & Show
$.effects.createWrapper(el); // Create Wrapper
$.effects.save( el, props );
el.show();
$.effects.createWrapper( el ); // Create Wrapper

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 == 'hide') distance = distance / (times * 2);
if (mode != 'hide') times--;
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 ? '+=' : '-=') + distance;
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 ? '-=' : '+=') + distance;
animation2[ref] = (motion ? '+=' : '-=') + distance;

// 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;
};
if (mode == 'hide') { // Last Bounce
var animation = { opacity: 0 };
animation[ref] = (motion ? '-=' : '+=') + distance;
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(); // Hide
$.effects.restore( el, props ); $.effects.removeWrapper( el ); // Restore
if ( o.complete ) o.complete.apply( this, arguments ); // Callback
el.hide();
$.effects.restore( el, props );
$.effects.removeWrapper( el );
$.isFunction( o.complete ) && o.complete.apply( this, arguments );
});
} else {
var 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); // Restore
if(o.complete) o.complete.apply(this, arguments); // Callback
});
};
el.queue('fx', function(next) { next(); });
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();
});

Expand Down
4 changes: 2 additions & 2 deletions ui/jquery.effects.drop.js
View file
Expand Up @@ -49,8 +49,8 @@ $.effects.drop = function( o ) {
easing: o.easing,
complete: function() {
mode == 'hide' && el.hide();
$.effects.restore(el, props);
$.effects.removeWrapper(el);
$.effects.restore( el, props );
$.effects.removeWrapper( el );
$.isFunction( o.complete ) && o.complete.apply(this, arguments);
el.dequeue();
}
Expand Down

0 comments on commit 576cd0b

Please sign in to comment.