From 321fd390579d38641c7adc0fa1ebe988bca3fde5 Mon Sep 17 00:00:00 2001 From: gnarf Date: Sun, 1 May 2011 03:44:33 -0500 Subject: [PATCH] Some minor tweaks to the effects, trying to clean up code a bit + style guidance --- ui/jquery.effects.bounce.js | 78 +++++++++++++++++++----------------- ui/jquery.effects.pulsate.js | 40 +++++++++--------- 2 files changed, 63 insertions(+), 55 deletions(-) diff --git a/ui/jquery.effects.bounce.js b/ui/jquery.effects.bounce.js index 4ccf4c77d..1ffd5ed5a 100644 --- a/ui/jquery.effects.bounce.js +++ b/ui/jquery.effects.bounce.js @@ -12,30 +12,28 @@ */ (function( $, undefined ) { -var rshowhide = /show|hide/; - $.effects.effect.bounce = function(o) { - return this.queue(function() { - - // Create element + return this.queue( function( next ) { var el = $( this ), - props = [ 'position', 'top', 'bottom', 'left', 'right' ], + props = [ "position", "top", "bottom", "left", "right" ], + // defaults: - mode = $.effects.setMode( el, o.mode || 'effect' ), - showhide = rshowhide.test( mode ), - direction = o.direction || 'up', + mode = $.effects.setMode( el, o.mode || "effect" ), + hide = mode === "hide", + show = mode === "show", + direction = o.direction || "up", distance = o.distance || 20, times = o.times || 5, // number of internal animations - anims = times * 2 + showhide, + anims = times * 2 + ( show || hide ? 1 : 0 ), speed = o.duration / anims, easing = o.easing, // utility: - ref = ( direction == 'up' || direction == 'down' ) ? 'top' : 'left', - motion = ( direction == 'up' || direction == 'left' ), // true is positive + ref = ( direction === "up" || direction === "down" ) ? "top" : "left", + motion = ( direction === "up" || direction === "left" ), i, upAnim, downAnim, @@ -45,8 +43,8 @@ $.effects.effect.bounce = function(o) { queuelen = queue.length; // Avoid touching opacity to prevent clearType and PNG issues in IE - if ( showhide ) { - props.push( 'opacity' ); + if ( show || hide ) { + props.push( "opacity" ); } $.effects.save( el, props ); @@ -55,41 +53,44 @@ $.effects.effect.bounce = function(o) { // default distance for the BIGGEST bounce is the outer Distance / 3 if ( !distance ) { - distance = el[ ref == 'top' ? 'outerHeight' : 'outerWidth' ]({ margin:true }) / 3; + distance = el[ ref === "top" ? "outerHeight" : "outerWidth" ]({ margin:true }) / 3; } - if ( mode == 'show' ) { - upAnim = { opacity: 1 }; - upAnim[ ref ] = 0; + if ( show ) { + downAnim = { opacity: 1 }; + downAnim[ ref ] = 0; - // fade and set the initial position if we are showing - el.css( 'opacity', 0 ) + // if we are showing, force opacity 0 and set the initial position + // then do the "first" animation + el.css( "opacity", 0 ) .css( ref, motion ? -distance*2 : distance*2 ) - .animate( upAnim, speed, easing ); + .animate( downAnim, speed, easing ); } // start at the smallest distance if we are hiding - if ( mode == 'hide' ) { + if ( hide ) { distance = distance / ( ( times - 1 ) * 2 ); } - // Bounces up then down (or reversed if motion) -- times * 2 animations happen here + downAnim = {}; + downAnim[ ref ] = 0; + // Bounces up/down/left/right then back to 0 -- times * 2 animations happen here for ( i = 0; i < times; i++ ) { upAnim = {}; - downAnim = {}; - upAnim[ ref ] = ( motion ? '-=' : '+=' ) + distance; - downAnim[ ref ] = ( motion ? '+=' : '-=' ) + distance; + upAnim[ ref ] = ( motion ? "-=" : "+=" ) + distance; + + // add the finish callback to the last animation if we aren't hiding el.animate( upAnim, speed, easing ) .animate( downAnim, speed, easing, - ( i == times - 1 ) && ( mode != "hide" ) ? finish : undefined ); + ( ( i === times - 1 ) && !hide ) ? finish : undefined ); - distance = mode == 'hide' ? distance * 2 : distance / 2; + distance = hide ? distance * 2 : distance / 2; } - // Last Bounce - if ( mode == 'hide' ) { + // Last Bounce when Hiding + if ( hide ) { upAnim = { opacity: 0 }; - upAnim[ ref ] = ( motion ? '-=' : '+=' ) + distance; + upAnim[ ref ] = ( motion ? "-=" : "+=" ) + distance; el.animate( upAnim, speed, easing, function(){ el.hide(); @@ -97,18 +98,21 @@ $.effects.effect.bounce = function(o) { }); } + function finish() { + $.effects.restore( el, props ); + $.effects.removeWrapper( el ); + if ( o.complete ) { + o.complete.apply( el[ 0 ] ); + } + } + // inject all the animations we just queued to be first in line (after "inprogress") if ( queuelen > 1) { queue.splice.apply( queue, [ 1, 0 ].concat( queue.splice( queuelen, anims ) ) ); } - el.dequeue(); + next(); - function finish() { - $.effects.restore( el, props ); - $.effects.removeWrapper( el ); - $.isFunction( o.complete ) && o.complete.apply( el[ 0 ], arguments ); - } }); }; diff --git a/ui/jquery.effects.pulsate.js b/ui/jquery.effects.pulsate.js index 3d90d1fa7..bcba48797 100644 --- a/ui/jquery.effects.pulsate.js +++ b/ui/jquery.effects.pulsate.js @@ -13,45 +13,49 @@ (function( $, undefined ) { $.effects.effect.pulsate = function( o ) { - return this.queue( function() { + return this.queue( function( next ) { var elem = $( this ), - mode = $.effects.setMode( elem, o.mode || 'show' ), + mode = $.effects.setMode( elem, o.mode || "show" ), + show = mode === "show" || !elem.is( ":visible" ), + showhide = ( show || mode === "hide" ), - // showing or hiding leave of the "last" time - times = ( ( o.times || 5 ) * 2 ) - ( mode == "show" || mode == "hide" ), - duration = o.duration / times, - show = !elem.is( ":visible" ), + // showing or hiding leaves of the "last" animation + anims = ( ( o.times || 5 ) * 2 ) - ( showhide ? 1 : 0 ), + duration = o.duration / anims, animateTo = 0, - i, queue = elem.queue(), - queuelen = queue.length; + queuelen = queue.length, + i; if ( show ) { - elem.css('opacity', 0).show(); + elem.css( "opacity", 0 ).show(); animateTo = 1; } - for ( i = 0; i < times - 1; i++ ) { - elem.animate({ - opacity: animateTo + for ( i = 0; i < anims - 1; i++ ) { + elem.animate({ + opacity: animateTo }, duration, o.easing ); animateTo = 1 - animateTo; } - elem.animate({ - opacity: animateTo + elem.animate({ + opacity: animateTo }, duration, o.easing, function() { - if (animateTo == 0) { + if ( animateTo === 0 ) { elem.hide(); } - (o.complete && o.complete.apply(this, arguments)); + if ( o.complete ) { + o.complete.apply( this ); + } }); + // We just queued up "anims" animations, we need to put them next in the queue if ( queuelen > 1) { queue.splice.apply( queue, - [ 1, 0 ].concat( queue.splice( queuelen, times ) ) ); + [ 1, 0 ].concat( queue.splice( queuelen, anims ) ) ); } - elem.dequeue(); + next(); }); }; -- 2.39.5