library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2025-01-07 20:34:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

effect.*: Style Guidance

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
ui/jquery.effects.fold.js vendored
View File

@ -12,40 +12,57 @@
*/
(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'];
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
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;
$.effects.save( el, props );
el.show();
// 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
// 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
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();
});

22
ui/jquery.effects.highlight.js vendored
View File

@ -12,20 +12,20 @@
*/
(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()
@ -33,15 +33,15 @@ $.effects.highlight = function(o) {
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();
}
});

39
ui/jquery.effects.pulsate.js vendored
View File

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