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

This commit is contained in:
gnarf 2011-05-01 06:24:22 -05:00
parent ec5aeb1b15
commit 1eada21549
4 changed files with 58 additions and 36 deletions

View File

@ -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();
}
});
});

View File

@ -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 ) {

View File

@ -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' ],

View File

@ -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();
});
};