From 7a60bc6824227bc2613eec1b79bcd6e8170d61f0 Mon Sep 17 00:00:00 2001 From: gnarf Date: Sun, 6 Mar 2011 17:45:43 -0600 Subject: [PATCH] effect.*: Style Guidance --- ui/jquery.effects.fold.js | 73 +++++++++++++++++++++------------- ui/jquery.effects.highlight.js | 22 +++++----- ui/jquery.effects.pulsate.js | 39 +++++++++--------- 3 files changed, 76 insertions(+), 58 deletions(-) diff --git a/ui/jquery.effects.fold.js b/ui/jquery.effects.fold.js index 9357868b7..19e97c40f 100644 --- a/ui/jquery.effects.fold.js +++ b/ui/jquery.effects.fold.js @@ -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']; - - // Set options - var mode = $.effects.setMode(el, o.mode || 'hide'); // Set Mode - var size = o.size || 15; // Default fold size - var horizFirst = !(!o.horizFirst); // Ensure a boolean value - var duration = o.duration ? o.duration / 2 : $.fx.speeds._default / 2; - - // 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 + 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; + + $.effects.save( el, props ); + el.show(); + + // 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.easing) - .animate(animation2, duration, o.easing, function() { - if(mode == 'hide') el.hide(); // Hide - $.effects.restore(el, props); $.effects.removeWrapper(el); // Restore - if(o.complete) o.complete.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(); + }); }); diff --git a/ui/jquery.effects.highlight.js b/ui/jquery.effects.highlight.js index 2049ec015..b2ffb15e8 100644 --- a/ui/jquery.effects.highlight.js +++ b/ui/jquery.effects.highlight.js @@ -12,20 +12,20 @@ */ (function( $, undefined ) { -$.effects.highlight = function(o) { - return this.queue(function() { - var elem = $(this), - props = ['backgroundImage', 'backgroundColor', 'opacity'], - mode = $.effects.setMode(elem, o.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() @@ -33,15 +33,15 @@ $.effects.highlight = function(o) { backgroundImage: 'none', backgroundColor: o.color || '#ffff99' }) - .animate(animation, { + .animate( animation, { queue: false, duration: o.duration, easing: o.easing, complete: function() { (mode == 'hide' && elem.hide()); - $.effects.restore(elem, props); - (mode == 'show' && !$.support.opacity && this.style.removeAttribute('filter')); - (o.complete && o.complete.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(); } }); diff --git a/ui/jquery.effects.pulsate.js b/ui/jquery.effects.pulsate.js index e7d53d02d..c5f67b12b 100644 --- a/ui/jquery.effects.pulsate.js +++ b/ui/jquery.effects.pulsate.js @@ -12,39 +12,40 @@ */ (function( $, undefined ) { -$.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 ? 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.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.easing, function() { + elem.animate({ + opacity: animateTo + }, duration, o.easing, function() { if (animateTo == 0) { elem.hide(); } (o.complete && o.complete.apply(this, arguments)); - }); - - elem - .queue('fx', function() { elem.dequeue(); }) - .dequeue(); + }).dequeue(); }); }; -- 2.39.5