Skip to content

Commit

Permalink
effect.*: Style Guidance
Browse files Browse the repository at this point in the history
  • Loading branch information
@gnarf
gnarf committed Mar 6, 2011
1 parent 8ce879e commit 7a60bc6
Show file tree
Hide file tree
Showing 3 changed files with 76 additions and 58 deletions.
73 changes: 45 additions & 28 deletions ui/jquery.effects.fold.js
View file
Expand Up @@ -12,42 +12,59 @@
*/
(function( $, undefined ) {

$.effects.fold = function(o) {
$.effects.fold = function( o ) {

return this.queue(function() {
return this.queue( function() {

// Create element
var el = $(this), props = ['position','top','bottom','left','right'];

// Set options
var mode = $.effects.setMode(el, o.mode || 'hide'); // Set Mode
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
$.effects.save(el, props); el.show(); // Save & Show
var wrapper = $.effects.createWrapper(el).css({overflow:'hidden'}); // Create Wrapper
var widthFirst = ((mode == 'show') != horizFirst);
var ref = widthFirst ? ['width', 'height'] : ['height', 'width'];
var distance = widthFirst ? [wrapper.width(), wrapper.height()] : [wrapper.height(), wrapper.width()];
var percent = /([0-9]+)%/.exec(size);
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
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;

$.effects.save( el, props );
el.show();

// Create Wrapper
wrapper = $.effects.createWrapper( el ).css({
overflow: 'hidden'
});
distance = widthFirst ?
[ wrapper.width(), wrapper.height() ] :
[ wrapper.height(), wrapper.width() ];

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
var animation1 = {}, animation2 = {};
animation1[ref[0]] = mode == 'show' ? distance[0] : size;
animation2[ref[1]] = mode == 'show' ? distance[1] : 0;
animation1[ ref[ 0 ] ] = mode == 'show' ? distance[ 0 ] : size;
animation2[ ref[ 1 ] ] = mode == 'show' ? distance[ 1 ] : 0;

// Animate
wrapper.animate(animation1, duration, o.easing)
.animate(animation2, duration, o.easing, function() {
if(mode == 'hide') el.hide(); // Hide
$.effects.restore(el, props); $.effects.removeWrapper(el); // Restore
if(o.complete) o.complete.apply(el[0], arguments); // Callback
el.dequeue();
});
wrapper
.animate( animation1, duration, o.easing )
.animate( animation2, duration, o.easing, function() {
(mode == 'hide') && el.hide();
$.effects.restore( el, props );
$.effects.removeWrapper( el );
jQuery.isFunction(o.complete) && o.complete.apply( el[ 0 ], arguments );
el.dequeue();
});

});

Expand Down
22 changes: 11 additions & 11 deletions ui/jquery.effects.highlight.js
View file
Expand Up @@ -12,36 +12,36 @@
*/
(function( $, undefined ) {

$.effects.highlight = function(o) {
return this.queue(function() {
var elem = $(this),
props = ['backgroundImage', 'backgroundColor', 'opacity'],
mode = $.effects.setMode(elem, o.mode || 'show'),
$.effects.highlight = function( o ) {
return this.queue( function() {
var elem = $( this ),
props = [ 'backgroundImage', 'backgroundColor', 'opacity' ],
mode = $.effects.setMode( elem, o.mode || 'show' ),
animation = {
backgroundColor: elem.css('backgroundColor')
backgroundColor: elem.css( 'backgroundColor' )
};

if (mode == 'hide') {
animation.opacity = 0;
}

$.effects.save(elem, props);
$.effects.save( elem, props );

elem
.show()
.css({
backgroundImage: 'none',
backgroundColor: o.color || '#ffff99'
})
.animate(animation, {
.animate( animation, {
queue: false,
duration: o.duration,
easing: o.easing,
complete: function() {
(mode == 'hide' && elem.hide());
$.effects.restore(elem, props);
(mode == 'show' && !$.support.opacity && this.style.removeAttribute('filter'));
(o.complete && o.complete.apply(this, arguments));
$.effects.restore( elem, props );
(mode == 'show' && !$.support.opacity && this.style.removeAttribute( 'filter' ));
jQuery.isFunction(o.complete) && o.complete.apply(this, arguments);
elem.dequeue();
}
});
Expand Down
39 changes: 20 additions & 19 deletions ui/jquery.effects.pulsate.js
View file
Expand Up @@ -12,39 +12,40 @@
*/
(function( $, undefined ) {

$.effects.pulsate = function(o) {
return this.queue(function() {
var elem = $(this),
mode = $.effects.setMode(elem, o.mode || 'show'),
times = ((o.times || 5) * 2) - 1,
duration = o.duration ? o.duration / 2 : $.fx.speeds._default / 2,
isVisible = elem.is(':visible'),
animateTo = 0;
$.effects.pulsate = function( o ) {
return this.queue( function() {
var elem = $( this ),
mode = $.effects.setMode( elem, o.mode || 'show' ),
times = ( ( o.times || 5 ) * 2 ) - 1,
duration = o.duration / 2,
isVisible = elem.is( ':visible' ),
animateTo = 0,
i;

if (!isVisible) {
if ( !isVisible ) {
elem.css('opacity', 0).show();
animateTo = 1;
}

if ((mode == 'hide' && isVisible) || (mode == 'show' && !isVisible)) {
if ( ( mode == 'hide' && isVisible ) || ( mode == 'show' && !isVisible ) ) {
times--;
}

for (var i = 0; i < times; i++) {
elem.animate({ opacity: animateTo }, duration, o.easing);
animateTo = (animateTo + 1) % 2;
for ( i = 0; i < times; i++ ) {
elem.animate({
opacity: animateTo
}, duration, o.easing );
animateTo = ( animateTo + 1 ) % 2;
}

elem.animate({ opacity: animateTo }, duration, o.easing, function() {
elem.animate({
opacity: animateTo
}, duration, o.easing, function() {
if (animateTo == 0) {
elem.hide();
}
(o.complete && o.complete.apply(this, arguments));
});

elem
.queue('fx', function() { elem.dequeue(); })
.dequeue();
}).dequeue();
});
};

Expand Down

0 comments on commit 7a60bc6

Please sign in to comment.