From 5c88bb702fcde5294a4ab357d249fe892309b997 Mon Sep 17 00:00:00 2001 From: gnarf Date: Sun, 27 Mar 2011 06:30:40 -0500 Subject: [PATCH 1/4] effects.*: Normalizing animation time - 1000 ms effect should only take 1000 ms - Fixes #7067 - Also making sure the queued animations run DIRECTLY after the effect --- ui/jquery.effects.bounce.js | 106 ++++++++++++++++++++--------------- ui/jquery.effects.pulsate.js | 32 ++++++----- 2 files changed, 79 insertions(+), 59 deletions(-) diff --git a/ui/jquery.effects.bounce.js b/ui/jquery.effects.bounce.js index 8da0feb76..d329857c6 100644 --- a/ui/jquery.effects.bounce.js +++ b/ui/jquery.effects.bounce.js @@ -23,17 +23,29 @@ $.effects.effect.bounce = function(o) { props = [ 'position', 'top', 'bottom', 'left', 'right' ], // defaults: mode = $.effects.setMode( el, o.mode || 'effect' ), + showhide = rshowhide.test( mode ), direction = o.direction || 'up', distance = o.distance || 20, - times = o.times || 5, - speed = (o.duration || 250), + times = o.times || 5, + + // number of internal animations + anims = times * 2 + showhide, + speed = (o.duration || 250) / anims, + easing = o.easing, + // utility: ref = ( direction == 'up' || direction == 'down' ) ? 'top' : 'left', motion = ( direction == 'up' || direction == 'left' ), // true is positive - i, animation, animation1, animation2; - + i, + upAnim, + downAnim, + + // we will need to re-assemble the queue to stack our animations in place + queue = el.queue(), + queuelen = queue.length; + // Avoid touching opacity to prevent clearType and PNG issues in IE - if ( rshowhide.test( mode ) ) { + if ( showhide ) { props.push( 'opacity' ); } @@ -41,60 +53,62 @@ $.effects.effect.bounce = function(o) { el.show(); $.effects.createWrapper( el ); // Create Wrapper + // default distance for the BIGGEST bounce is the outer Distance / 3 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' ) { - animation = { - opacity: 1 - }; - animation[ ref ] = ( motion ? '+=' : '-=' ) + distance; - el.animate( animation, speed / 2, o.easing); - distance = distance / 2; - times--; - }; + if ( mode == 'show' ) { + upAnim = { opacity: 1 }; + upAnim[ ref ] = 0; - // 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; + // fade and set the initial position if we are showing + el.css( 'opacity', 0 ) + .css( ref, motion ? -distance*2 : distance*2 ) + .animate( upAnim, speed, easing ); + } + + // start at the smallest distance if we are hiding + if ( mode == 'hide' ) { + distance = distance / ( ( times - 1 ) * 2 ); + } + + // Bounces up then down (or reversed if motion) -- times * 2 animations happen here + for ( i = 0; i < times; i++ ) { + upAnim = {}; + downAnim = {}; + upAnim[ ref ] = ( motion ? '-=' : '+=' ) + distance; + downAnim[ ref ] = ( motion ? '+=' : '-=' ) + distance; + el.animate( upAnim, speed, easing ) + .animate( downAnim, speed, easing, + ( i == times - 1 ) && ( mode != "hide" ) ? finish : undefined ); + + 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(){ + upAnim = { opacity: 0 }; + upAnim[ ref ] = ( motion ? '-=' : '+=' ) + distance; + + el.animate( upAnim, speed, easing, function(){ el.hide(); - $.effects.restore( el, props ); - $.effects.removeWrapper( el ); - $.isFunction( o.complete ) && o.complete.apply( this, arguments ); + finish(); }); - } else { - 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 ); - }); + } + + // 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(); + + 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 b168b6ef5..3d90d1fa7 100644 --- a/ui/jquery.effects.pulsate.js +++ b/ui/jquery.effects.pulsate.js @@ -16,26 +16,26 @@ $.effects.effect.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 ) { + // 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" ), + animateTo = 0, + i, + queue = elem.queue(), + queuelen = queue.length; + + if ( show ) { elem.css('opacity', 0).show(); animateTo = 1; } - if ( ( mode == 'hide' && isVisible ) || ( mode == 'show' && !isVisible ) ) { - times--; - } - - for ( i = 0; i < times; i++ ) { + for ( i = 0; i < times - 1; i++ ) { elem.animate({ opacity: animateTo }, duration, o.easing ); - animateTo = ( animateTo + 1 ) % 2; + animateTo = 1 - animateTo; } elem.animate({ @@ -45,7 +45,13 @@ $.effects.effect.pulsate = function( o ) { elem.hide(); } (o.complete && o.complete.apply(this, arguments)); - }).dequeue(); + }); + + if ( queuelen > 1) { + queue.splice.apply( queue, + [ 1, 0 ].concat( queue.splice( queuelen, times ) ) ); + } + elem.dequeue(); }); }; From 504e5995692a9d4444f8dd78c610f2fa5355fffb Mon Sep 17 00:00:00 2001 From: gnarf Date: Sun, 27 Mar 2011 06:32:04 -0500 Subject: [PATCH 2/4] effects.tests: changing the way the effects test runs - using delay() instead of callbacks can help us see if we have places where we destroyed the queue --- tests/visual/effects.all.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/tests/visual/effects.all.js b/tests/visual/effects.all.js index 5e47a4f48..f678c6276 100644 --- a/tests/visual/effects.all.js +++ b/tests/visual/effects.all.js @@ -14,12 +14,14 @@ $(function() { $(el).bind("click", function() { - $(this).addClass("current").hide(n, o, duration, function() { - var self = this; - window.setTimeout(function() { - $(self).show(n, o, duration, function() { $(this).removeClass("current"); }); - }, wait); - }); + $(this).addClass("current") + // delaying the initial animation makes sure that the queue stays in tact + .delay( 10 ) + .hide( n, o, duration ) + .delay( wait ) + .show( n, o, duration, function() { + $( this ).removeClass("current"); + }); }); }; From cc2342ac31cc618271de7c5e2fa20fad79d6aad8 Mon Sep 17 00:00:00 2001 From: gnarf Date: Mon, 4 Apr 2011 15:43:47 -0500 Subject: [PATCH 3/4] effects.bounce: removing the opti for duration, the normalizeArguments in core will ALWAYS set a duration, no need to default here --- ui/jquery.effects.bounce.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/jquery.effects.bounce.js b/ui/jquery.effects.bounce.js index d329857c6..4ccf4c77d 100644 --- a/ui/jquery.effects.bounce.js +++ b/ui/jquery.effects.bounce.js @@ -30,7 +30,7 @@ $.effects.effect.bounce = function(o) { // number of internal animations anims = times * 2 + showhide, - speed = (o.duration || 250) / anims, + speed = o.duration / anims, easing = o.easing, // utility: From 321fd390579d38641c7adc0fa1ebe988bca3fde5 Mon Sep 17 00:00:00 2001 From: gnarf Date: Sun, 1 May 2011 03:44:33 -0500 Subject: [PATCH 4/4] 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(); }); };