diff --git a/tests/visual/effects.all.js b/tests/visual/effects.all.js index 3ac8968b3..9cf7487c9 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"); + }); }); }; diff --git a/ui/jquery.effects.bounce.js b/ui/jquery.effects.bounce.js index 8da0feb76..bb386a4f4 100644 --- a/ui/jquery.effects.bounce.js +++ b/ui/jquery.effects.bounce.js @@ -12,89 +12,107 @@ */ (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' ), - direction = o.direction || 'up', - distance = o.distance || 20, - times = o.times || 5, - speed = (o.duration || 250), + mode = $.effects.setMode( el, o.mode || "effect" ), + hide = mode === "hide", + show = mode === "show", + direction = o.direction || "up", + distance = o.distance, + times = o.times || 5, + + // number of internal animations + 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 - i, animation, animation1, animation2; - + ref = ( direction === "up" || direction === "down" ) ? "top" : "left", + motion = ( direction === "up" || direction === "left" ), + 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 ) ) { - props.push( 'opacity' ); + if ( show || hide ) { + props.push( "opacity" ); } $.effects.save( el, props ); 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; + distance = el[ ref === "top" ? "outerHeight" : "outerWidth" ]() / 3; } - // Last Bounce - if ( mode == 'hide' ) { - animation = { - opacity: 0 - }; - animation[ ref ] = ( motion ? '-=' : '+=' ) + distance; - el.animate( animation, speed / 2, o.easing, function(){ + if ( show ) { + downAnim = { opacity: 1 }; + downAnim[ ref ] = 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( downAnim, speed, easing ); + } + + // start at the smallest distance if we are hiding + if ( hide ) { + distance = distance / Math.pow( 2, times - 1 ); + } + + 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 = {}; + 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 ) && !hide ) ? finish : undefined ); + + distance = hide ? distance * 2 : distance / 2; + } + + // Last Bounce when Hiding + if ( hide ) { + 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 ); - }); } - el.dequeue(); + + 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 ) ) ); + } + next(); + }); }; diff --git a/ui/jquery.effects.pulsate.js b/ui/jquery.effects.pulsate.js index b168b6ef5..3325c251f 100644 --- a/ui/jquery.effects.pulsate.js +++ b/ui/jquery.effects.pulsate.js @@ -13,39 +13,50 @@ (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' ), - times = ( ( o.times || 5 ) * 2 ) - 1, - duration = o.duration / 2, - isVisible = elem.is( ':visible' ), + mode = $.effects.setMode( elem, o.mode || "effect" ), + show = mode === "show" || elem.is( ":hidden" ), + showhide = ( show || mode === "hide" ), + + // showing or hiding adds an extra "half" animation + anims = ( ( o.times || 5 ) * 2 ) + ( showhide ? 1 : 0 ), + duration = o.duration / anims, animateTo = 0, + queue = elem.queue(), + queuelen = queue.length, i; - if ( !isVisible ) { - elem.css('opacity', 0).show(); + if ( show ) { + elem.css( "opacity", 0 ).show(); animateTo = 1; } - if ( ( mode == 'hide' && isVisible ) || ( mode == 'show' && !isVisible ) ) { - times--; - } - - for ( i = 0; i < times; i++ ) { - elem.animate({ - opacity: animateTo + // anims - 1 opacity "toggles" + for ( i = 1; i < anims; i++ ) { + elem.animate({ + opacity: animateTo }, duration, o.easing ); - animateTo = ( animateTo + 1 ) % 2; + 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)); - }).dequeue(); + 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, anims ) ) ); + } + next(); }); };