From 5c88bb702fcde5294a4ab357d249fe892309b997 Mon Sep 17 00:00:00 2001 From: gnarf Date: Sun, 27 Mar 2011 06:30:40 -0500 Subject: [PATCH] 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 | 110 ++++++++++++++++++++--------------- ui/jquery.effects.pulsate.js | 30 ++++++---- 2 files changed, 80 insertions(+), 60 deletions(-) diff --git a/ui/jquery.effects.bounce.js b/ui/jquery.effects.bounce.js index 8da0feb7630..d329857c611 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--; - }; - - // 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 == 'show' ) { + upAnim = { opacity: 1 }; + upAnim[ ref ] = 0; + + // 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 b168b6ef518..3d90d1fa704 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' ), + + // 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; + i, + queue = elem.queue(), + queuelen = queue.length; - if ( !isVisible ) { + 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(); }); };