From 1eada2154910102e4c39d131a23af24ad0d92815 Mon Sep 17 00:00:00 2001 From: gnarf Date: Sun, 1 May 2011 06:24:22 -0500 Subject: [PATCH] effects.*: Updating fade, pulsate, scale, shake to pass units --- ui/jquery.effects.fade.js | 17 +++++++---- ui/jquery.effects.pulsate.js | 10 +++---- ui/jquery.effects.scale.js | 10 ++++--- ui/jquery.effects.shake.js | 57 ++++++++++++++++++++++-------------- 4 files changed, 58 insertions(+), 36 deletions(-) diff --git a/ui/jquery.effects.fade.js b/ui/jquery.effects.fade.js index 5fa0319c0..ff1cba5f8 100644 --- a/ui/jquery.effects.fade.js +++ b/ui/jquery.effects.fade.js @@ -13,19 +13,26 @@ (function( $, undefined ) { $.effects.effect.fade = function( o ) { - return this.queue( function() { + return this.queue( function( next ) { var el = $( this ), - mode = $.effects.setMode( el, o.mode || 'hide' ); + mode = $.effects.setMode( el, o.mode || 'toggle' ), + hide = mode === "hide"; + el.show(); el.animate({ - opacity: mode + opacity: hide ? 0 : 1 }, { queue: false, duration: o.duration, easing: o.easing, complete: function() { - $.isFunction( o.complete ) && o.complete.apply( this, arguments ); - el.dequeue(); + if ( hide ) { + el.hide(); + } + if ( o.complete ) { + o.complete.call( this ); + } + next(); } }); }); diff --git a/ui/jquery.effects.pulsate.js b/ui/jquery.effects.pulsate.js index bcba48797..30c346abd 100644 --- a/ui/jquery.effects.pulsate.js +++ b/ui/jquery.effects.pulsate.js @@ -16,18 +16,18 @@ $.effects.effect.pulsate = function( o ) { return this.queue( function( next ) { var elem = $( this ), mode = $.effects.setMode( elem, o.mode || "show" ), - show = mode === "show" || !elem.is( ":visible" ), - showhide = ( show || mode === "hide" ), + show = mode === "show", + hide = mode === "hide", // showing or hiding leaves of the "last" animation - anims = ( ( o.times || 5 ) * 2 ) - ( showhide ? 1 : 0 ), + anims = ( ( o.times || 5 ) * 2 ) - ( show || hide ? 1 : 0 ), duration = o.duration / anims, animateTo = 0, queue = elem.queue(), queuelen = queue.length, i; - if ( show ) { + if ( show || !elem.is(':visible')) { elem.css( "opacity", 0 ).show(); animateTo = 1; } @@ -42,7 +42,7 @@ $.effects.effect.pulsate = function( o ) { elem.animate({ opacity: animateTo }, duration, o.easing, function() { - if ( animateTo === 0 ) { + if ( hide ) { elem.hide(); } if ( o.complete ) { diff --git a/ui/jquery.effects.scale.js b/ui/jquery.effects.scale.js index 8f25ca9a8..843aa2241 100644 --- a/ui/jquery.effects.scale.js +++ b/ui/jquery.effects.scale.js @@ -25,6 +25,7 @@ $.effects.effect.puff = function( o ) { $.extend(o, { effect: 'scale', + queue: false, fade: true, mode: mode, percent: mode == 'hide' ? percent : 100, @@ -36,13 +37,13 @@ $.effects.effect.puff = function( o ) { } }); - elem.effect( o ).dequeue(); + elem.effect( o ); }); }; $.effects.effect.scale = function( o ) { - return this.queue( function() { + return this[ o.queue === false ? "each" : "queue" ]( function() { // Create element var el = $( this ), @@ -62,6 +63,7 @@ $.effects.effect.scale = function( o ) { // We are going to pass this effect to the size effect: options.effect = "size"; + options.queue = false; // Set default origin and restore for show/hide if ( mode != 'effect' ) { @@ -87,14 +89,14 @@ $.effects.effect.scale = function( o ) { }; // Animate - el.effect(options).dequeue(); + el.effect(options); }); }; $.effects.effect.size = function( o ) { - return this.queue( function() { + return this[ o.queue === false ? "each" : "queue" ]( function() { // Create element var el = $( this ), props = [ 'position', 'top', 'bottom', 'left', 'right', 'width', 'height', 'overflow', 'opacity' ], diff --git a/ui/jquery.effects.shake.js b/ui/jquery.effects.shake.js index a1ba1577c..cd26dc5af 100644 --- a/ui/jquery.effects.shake.js +++ b/ui/jquery.effects.shake.js @@ -17,46 +17,59 @@ $.effects.effect.shake = function( o ) { return this.queue( function() { var el = $( this ), - props = [ 'position', 'top', 'bottom', 'left', 'right' ], - mode = $.effects.setMode( el, o.mode || 'effect' ), - direction = o.direction || 'left', + props = [ "position", "top", "bottom", "left", "right" ], + mode = $.effects.setMode( el, o.mode || "effect" ), + direction = o.direction || "left", distance = o.distance || 20, times = o.times || 3, - speed = o.duration || 140, - ref = (direction == 'up' || direction == 'down') ? 'top' : 'left', - motion = (direction == 'up' || direction == 'left') ? 'pos' : 'neg', + anims = times * 2 + 1, + speed = o.duration, + ref = (direction == "up" || direction == "down") ? "top" : "left", + motion = (direction == "up" || direction == "left") ? "pos" : "neg", animation = {}, animation1 = {}, animation2 = {}, - i; + i, - // Adjust - $.effects.save( el, props ); - el.show(); - $.effects.createWrapper( el ); // Create Wrapper + // we will need to re-assemble the queue to stack our animations in place + queue = el.queue(), + queuelen = queue.length; + + + $.effects.save( el, props ); + el.show(); + $.effects.createWrapper( el ); // Animation - animation[ ref ] = ( motion == 'pos' ? '-=' : '+=' ) + distance; - animation1[ ref ] = ( motion == 'pos' ? '+=' : '-=' ) + distance * 2; - animation2[ ref ] = ( motion == 'pos' ? '-=' : '+=' ) + distance * 2; + animation[ ref ] = ( motion == "pos" ? "-=" : "+=" ) + distance; + animation1[ ref ] = ( motion == "pos" ? "+=" : "-=" ) + distance * 2; + animation2[ ref ] = ( motion == "pos" ? "-=" : "+=" ) + distance * 2; // Animate el.animate( animation, speed, o.easing ); // Shakes - for ( i = 1; i < times; i++ ) { + for ( i = 1; i < times; i++ ) { el.animate( animation1, speed, o.easing ).animate( animation2, speed, o.easing ); }; el .animate( animation1, speed, o.easing ) - .animate( animation, speed / 2, o.easing, function() { - + .animate( animation, speed / 2, o.easing, function() { + if ( mode === "hide" ) { + el.hide(); + } // Last shake - $.effects.restore( el, props ); - $.effects.removeWrapper( el ); - $.isFunction( o.complete ) && o.complete.apply( this, arguments ); - }) - .dequeue(); + $.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(); }); };