Skip to content
Permalink
Browse files

effects.*: Updating fade, pulsate, scale, shake to pass units

  • Loading branch information...
gnarf committed May 1, 2011
1 parent ec5aeb1 commit 1eada2154910102e4c39d131a23af24ad0d92815
Showing with 58 additions and 36 deletions.
  1. +12 −5 ui/jquery.effects.fade.js
  2. +5 −5 ui/jquery.effects.pulsate.js
  3. +6 −4 ui/jquery.effects.scale.js
  4. +35 −22 ui/jquery.effects.shake.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();
}
});
});
@@ -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 ) {
@@ -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' ],
@@ -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();
});

};

0 comments on commit 1eada21

Please sign in to comment.
You can’t perform that action at this time.