effect.*: Style Guidance

This commit is contained in:
gnarf 2011-03-06 17:45:43 -06:00
parent 8ce879e51b
commit 7a60bc6824
3 changed files with 74 additions and 56 deletions

View File

@ -17,23 +17,38 @@ $.effects.fold = function(o) {
return this.queue( function() { return this.queue( function() {
// Create element // Create element
var el = $(this), props = ['position','top','bottom','left','right']; var el = $( this ),
props = ['position','top','bottom','left','right'],
mode = $.effects.setMode(el, o.mode || 'hide'),
size = o.size || 15,
percent = /([0-9]+)%/.exec(size),
horizFirst = !!o.horizFirst,
widthFirst = ((mode == 'show') != horizFirst),
ref = widthFirst ? ['width', 'height'] : ['height', 'width'],
duration = o.duration / 2,
wrapper, distance;
// Set options $.effects.save( el, props );
var mode = $.effects.setMode(el, o.mode || 'hide'); // Set Mode el.show();
var size = o.size || 15; // Default fold size
var horizFirst = !(!o.horizFirst); // Ensure a boolean value
var duration = o.duration ? o.duration / 2 : $.fx.speeds._default / 2;
// Adjust // Create Wrapper
$.effects.save(el, props); el.show(); // Save & Show wrapper = $.effects.createWrapper( el ).css({
var wrapper = $.effects.createWrapper(el).css({overflow:'hidden'}); // Create Wrapper overflow: 'hidden'
var widthFirst = ((mode == 'show') != horizFirst); });
var ref = widthFirst ? ['width', 'height'] : ['height', 'width']; distance = widthFirst ?
var distance = widthFirst ? [wrapper.width(), wrapper.height()] : [wrapper.height(), wrapper.width()]; [ wrapper.width(), wrapper.height() ] :
var percent = /([0-9]+)%/.exec(size); [ wrapper.height(), wrapper.width() ];
if(percent) size = parseInt(percent[1],10) / 100 * distance[mode == 'hide' ? 0 : 1];
if(mode == 'show') wrapper.css(horizFirst ? {height: 0, width: size} : {height: size, width: 0}); // Shift if ( percent ) {
size = parseInt( percent[ 1 ], 10 ) / 100 * distance[ ( mode == 'hide') ? 0 : 1 ];
}
mode == 'show' && wrapper.css( horizFirst ? {
height: 0,
width: size
} : {
height: size,
width: 0
});
// Animation // Animation
var animation1 = {}, animation2 = {}; var animation1 = {}, animation2 = {};
@ -41,11 +56,13 @@ $.effects.fold = function(o) {
animation2[ ref[ 1 ] ] = mode == 'show' ? distance[ 1 ] : 0; animation2[ ref[ 1 ] ] = mode == 'show' ? distance[ 1 ] : 0;
// Animate // Animate
wrapper.animate(animation1, duration, o.easing) wrapper
.animate( animation1, duration, o.easing )
.animate( animation2, duration, o.easing, function() { .animate( animation2, duration, o.easing, function() {
if(mode == 'hide') el.hide(); // Hide (mode == 'hide') && el.hide();
$.effects.restore(el, props); $.effects.removeWrapper(el); // Restore $.effects.restore( el, props );
if(o.complete) o.complete.apply(el[0], arguments); // Callback $.effects.removeWrapper( el );
jQuery.isFunction(o.complete) && o.complete.apply( el[ 0 ], arguments );
el.dequeue(); el.dequeue();
}); });

View File

@ -41,7 +41,7 @@ $.effects.highlight = function(o) {
(mode == 'hide' && elem.hide()); (mode == 'hide' && elem.hide());
$.effects.restore( elem, props ); $.effects.restore( elem, props );
(mode == 'show' && !$.support.opacity && this.style.removeAttribute( 'filter' )); (mode == 'show' && !$.support.opacity && this.style.removeAttribute( 'filter' ));
(o.complete && o.complete.apply(this, arguments)); jQuery.isFunction(o.complete) && o.complete.apply(this, arguments);
elem.dequeue(); elem.dequeue();
} }
}); });

View File

@ -17,9 +17,10 @@ $.effects.pulsate = function(o) {
var elem = $( this ), var elem = $( this ),
mode = $.effects.setMode( elem, o.mode || 'show' ), mode = $.effects.setMode( elem, o.mode || 'show' ),
times = ( ( o.times || 5 ) * 2 ) - 1, times = ( ( o.times || 5 ) * 2 ) - 1,
duration = o.duration ? o.duration / 2 : $.fx.speeds._default / 2, duration = o.duration / 2,
isVisible = elem.is( ':visible' ), isVisible = elem.is( ':visible' ),
animateTo = 0; animateTo = 0,
i;
if ( !isVisible ) { if ( !isVisible ) {
elem.css('opacity', 0).show(); elem.css('opacity', 0).show();
@ -30,21 +31,21 @@ $.effects.pulsate = function(o) {
times--; times--;
} }
for (var i = 0; i < times; i++) { for ( i = 0; i < times; i++ ) {
elem.animate({ opacity: animateTo }, duration, o.easing); elem.animate({
opacity: animateTo
}, duration, o.easing );
animateTo = ( animateTo + 1 ) % 2; animateTo = ( animateTo + 1 ) % 2;
} }
elem.animate({ opacity: animateTo }, duration, o.easing, function() { elem.animate({
opacity: animateTo
}, duration, o.easing, function() {
if (animateTo == 0) { if (animateTo == 0) {
elem.hide(); elem.hide();
} }
(o.complete && o.complete.apply(this, arguments)); (o.complete && o.complete.apply(this, arguments));
}); }).dequeue();
elem
.queue('fx', function() { elem.dequeue(); })
.dequeue();
}); });
}; };