From: gnarf Date: Sun, 6 Mar 2011 21:24:24 +0000 (-0600) Subject: effects.*: More Style Guidance X-Git-Tag: 1.9m5~235^2~17 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=bcb8f7ed9aee8ecb0ad5144204f6c7083949b3a7;p=jquery-ui.git effects.*: More Style Guidance --- diff --git a/ui/jquery.effects.blind.js b/ui/jquery.effects.blind.js index 0bf5b0b71..814649a04 100644 --- a/ui/jquery.effects.blind.js +++ b/ui/jquery.effects.blind.js @@ -16,11 +16,11 @@ $.effects.blind = function(o) { return this.queue(function() { // Create element - var el = $(this), + var el = $( this ), props = ['position','top','bottom','left','right'], mode = $.effects.setMode( el, o.mode || 'hide' ), direction = o.direction || 'vertical', - ref = (direction == 'vertical') ? 'height' : 'width', + ref = ( direction == 'vertical' ) ? 'height' : 'width', animation = {}, wrapper, distance; diff --git a/ui/jquery.effects.explode.js b/ui/jquery.effects.explode.js index 7dffed5ed..763092457 100644 --- a/ui/jquery.effects.explode.js +++ b/ui/jquery.effects.explode.js @@ -12,64 +12,63 @@ */ (function( $, undefined ) { -$.effects.explode = function(o) { +$.effects.explode = function( o ) { - return this.queue(function() { + return this.queue( function() { - var rows = o.pieces ? Math.round(Math.sqrt(o.pieces)) : 3; - var cells = o.pieces ? Math.round(Math.sqrt(o.pieces)) : 3; + var rows = o.pieces ? Math.round(Math.sqrt(o.pieces)) : 3, + cells = rows, + el = $( this ).show().css( 'visibility', 'hidden' ), + mode = $.effects.setMode( el, o.mode || 'hide' ), + offset = el.offset(), + width = el.outerWidth( true ), + height = el.outerHeight( true ); - o.mode = o.mode == 'toggle' ? ($(this).is(':visible') ? 'hide' : 'show') : o.mode; - var el = $(this).show().css('visibility', 'hidden'); - var offset = el.offset(); + //Substract the margins - not fixing the problem yet. + offset.top -= parseInt( el.css( "marginTop" ), 10 ) || 0; + offset.left -= parseInt( el.css( "marginLeft" ), 10 ) || 0; - //Substract the margins - not fixing the problem yet. - offset.top -= parseInt(el.css("marginTop"),10) || 0; - offset.left -= parseInt(el.css("marginLeft"),10) || 0; - - var width = el.outerWidth(true); - var height = el.outerHeight(true); - - for(var i=0;i') - .css({ - position: 'absolute', - visibility: 'visible', - left: -j*(width/cells), - top: -i*(height/rows) - }) - .parent() - .addClass('ui-effects-explode') - .css({ - position: 'absolute', - overflow: 'hidden', - width: width/cells, - height: height/rows, - left: offset.left + j*(width/cells) + (o.mode == 'show' ? (j-Math.floor(cells/2))*(width/cells) : 0), - top: offset.top + i*(height/rows) + (o.mode == 'show' ? (i-Math.floor(rows/2))*(height/rows) : 0), - opacity: o.mode == 'show' ? 0 : 1 - }).animate({ - left: offset.left + j*(width/cells) + (o.mode == 'show' ? 0 : (j-Math.floor(cells/2))*(width/cells)), - top: offset.top + i*(height/rows) + (o.mode == 'show' ? 0 : (i-Math.floor(rows/2))*(height/rows)), - opacity: o.mode == 'show' ? 1 : 0 - }, o.duration || 500); + for( var i = 0; i < rows ; i++ ) { // = + for( var j = 0; j < cells ; j++ ) { // || + el + .clone() + .appendTo('body') + .wrap('
') + .css({ + position: 'absolute', + visibility: 'visible', + left: -j*(width/cells), + top: -i*(height/rows) + }) + .parent() + .addClass('ui-effects-explode') + .css({ + position: 'absolute', + overflow: 'hidden', + width: width/cells, + height: height/rows, + left: offset.left + j*(width/cells) + (o.mode == 'show' ? (j-Math.floor(cells/2))*(width/cells) : 0), + top: offset.top + i*(height/rows) + (o.mode == 'show' ? (i-Math.floor(rows/2))*(height/rows) : 0), + opacity: mode == 'show' ? 0 : 1 + }).animate({ + left: offset.left + j*(width/cells) + (o.mode == 'show' ? 0 : (j-Math.floor(cells/2))*(width/cells)), + top: offset.top + i*(height/rows) + (o.mode == 'show' ? 0 : (i-Math.floor(rows/2))*(height/rows)), + opacity: mode == 'show' ? 1 : 0 + }, o.duration || 500); + } } - } - - // Set a timeout, to call the callback approx. when the other animations have finished - setTimeout(function() { - o.mode == 'show' ? el.css({ visibility: 'visible' }) : el.css({ visibility: 'visible' }).hide(); - if(o.complete) o.complete.apply(el[0]); // Callback - el.dequeue(); + // Set a timeout, to call the callback approx. when the other animations have finished + setTimeout(function() { - $('div.ui-effects-explode').remove(); + el.css({ visibility: 'visible' }); + mode != 'show' && el.hide(); + $.isFunction( o.complete ) && o.complete.apply( el[ 0 ] ); + el.dequeue(); - }, o.duration || 500); + // Note: This is removing all exploding peices from the dom, rather than the ones for this animation only... Ticket# 6022 + $('div.ui-effects-explode').remove(); + }, o.duration || 500); }); diff --git a/ui/jquery.effects.fade.js b/ui/jquery.effects.fade.js index 9fa8a79c4..c6cb85cc2 100644 --- a/ui/jquery.effects.fade.js +++ b/ui/jquery.effects.fade.js @@ -12,18 +12,20 @@ */ (function( $, undefined ) { -$.effects.fade = function(o) { - return this.queue(function() { - var elem = $(this), - mode = $.effects.setMode(elem, o.options.mode || 'hide'); +$.effects.fade = function( o ) { + return this.queue( function() { + var el = $( this ), + mode = $.effects.setMode( el, o.mode || 'hide' ); - elem.animate({ opacity: mode }, { + el.animate({ + opacity: mode + }, { queue: false, duration: o.duration, - easing: o.options.easing, + easing: o.easing, complete: function() { - (o.callback && o.callback.apply(this, arguments)); - elem.dequeue(); + jQuery.isFunction( o.complete ) && o.complete.apply( this, arguments ); + el.dequeue(); } }); });