Skip to content

Commit

Permalink
Effects.*: Style Guidance
Browse files Browse the repository at this point in the history
  • Loading branch information
gnarf committed Jun 21, 2011
1 parent 1c1a3b1 commit 65a6c46
Show file tree
Hide file tree
Showing 10 changed files with 74 additions and 51 deletions.
16 changes: 8 additions & 8 deletions ui/jquery.effects.blind.js
Expand Up @@ -11,7 +11,7 @@
* jquery.effects.core.js * jquery.effects.core.js
*/ */
(function( $, undefined ) { (function( $, undefined ) {

var rvertical = /up|down|vertical/, var rvertical = /up|down|vertical/,
rpositivemotion = /up|left|vertical|horizontal/; rpositivemotion = /up|left|vertical|horizontal/;


Expand All @@ -35,24 +35,24 @@ $.effects.effect.blind = function( o, next ) {
} else { } else {
$.effects.save( el, props ); $.effects.save( el, props );
} }
el.show(); el.show();
wrapper = $.effects.createWrapper( el ).css({ wrapper = $.effects.createWrapper( el ).css({
overflow: "hidden" overflow: "hidden"
}); });


distance = wrapper[ ref ](); distance = wrapper[ ref ]();


animation[ ref ] = ( mode === "show" ? distance : 0 ); animation[ ref ] = show ? distance : 0;
if ( !motion ) { if ( !motion ) {
el el
.css( vertical ? "bottom" : "right", 0 ) .css( vertical ? "bottom" : "right", 0 )
.css( vertical ? "top" : "left", "" ) .css( vertical ? "top" : "left", "" )
.css({ position: "absolute" }); .css({ position: "absolute" });
animation[ ref2 ] = ( mode === "show" ) ? 0 : distance; animation[ ref2 ] = show ? 0 : distance;
} }


// start at 0 if we are showing // start at 0 if we are showing
if ( mode === "show" ) { if ( show ) {
wrapper.css( ref, 0 ); wrapper.css( ref, 0 );
if ( ! motion ) { if ( ! motion ) {
wrapper.css( ref2, distance ); wrapper.css( ref2, distance );
Expand All @@ -65,10 +65,10 @@ $.effects.effect.blind = function( o, next ) {
easing: o.easing, easing: o.easing,
queue: false, queue: false,
complete: function() { complete: function() {
if ( mode == "hide" ) { if ( mode === "hide" ) {
el.hide(); el.hide();
} }
$.effects.restore( el, props ); $.effects.restore( el, props );
$.effects.removeWrapper( el ); $.effects.removeWrapper( el );
if ( $.isFunction( o.complete ) ) { if ( $.isFunction( o.complete ) ) {
o.complete.apply( el[ 0 ], arguments ); o.complete.apply( el[ 0 ], arguments );
Expand Down
2 changes: 1 addition & 1 deletion ui/jquery.effects.bounce.js
Expand Up @@ -61,7 +61,7 @@ $.effects.effect.bounce = function( o, next ) {
// if we are showing, force opacity 0 and set the initial position // if we are showing, force opacity 0 and set the initial position
// then do the "first" animation // then do the "first" animation
el.css( "opacity", 0 ) el.css( "opacity", 0 )
.css( ref, motion ? -distance*2 : distance*2 ) .css( ref, motion ? -distance * 2 : distance * 2 )
.animate( downAnim, speed, easing ); .animate( downAnim, speed, easing );
} }


Expand Down
16 changes: 10 additions & 6 deletions ui/jquery.effects.drop.js
Expand Up @@ -17,11 +17,12 @@ $.effects.effect.drop = function( o, next ) {
var el = $( this ), var el = $( this ),
props = [ "position", "top", "bottom", "left", "right", "opacity", "height", "width" ], props = [ "position", "top", "bottom", "left", "right", "opacity", "height", "width" ],
mode = $.effects.setMode( el, o.mode || "hide" ), mode = $.effects.setMode( el, o.mode || "hide" ),
show = mode === "show",
direction = o.direction || "left", direction = o.direction || "left",
ref = ( direction == "up" || direction == "down" ) ? "top" : "left", ref = ( direction === "up" || direction === "down" ) ? "top" : "left",
motion = ( direction == "up" || direction == "left" ) ? "pos" : "neg", motion = ( direction === "up" || direction === "left" ) ? "pos" : "neg",
animation = { animation = {
opacity: mode == "show" ? 1 : 0 opacity: show ? 1 : 0
}, },
distance; distance;


Expand All @@ -32,14 +33,17 @@ $.effects.effect.drop = function( o, next ) {


distance = o.distance || el[ ref == "top" ? "outerHeight": "outerWidth" ]({ margin: true }) / 2; distance = o.distance || el[ ref == "top" ? "outerHeight": "outerWidth" ]({ margin: true }) / 2;


if ( mode == "show" ) { if ( show ) {
el el
.css( "opacity", 0 ) .css( "opacity", 0 )
.css( ref, motion == "pos" ? -distance : distance ); .css( ref, motion == "pos" ? -distance : distance );
} }


// Animation // Animation
animation[ ref ] = ((mode == "show") ? (motion == "pos" ? "+=" : "-=") : (motion == "pos" ? "-=" : "+=")) + distance; animation[ ref ] = ( show ?
( motion === "pos" ? "+=" : "-=" ) :
( motion === "pos" ? "-=" : "+=" ) )
+ distance;


// Animate // Animate
el.animate( animation, { el.animate( animation, {
Expand All @@ -50,7 +54,7 @@ $.effects.effect.drop = function( o, next ) {
mode == "hide" && el.hide(); mode == "hide" && el.hide();
$.effects.restore( el, props ); $.effects.restore( el, props );
$.effects.removeWrapper( el ); $.effects.removeWrapper( el );
$.isFunction( o.complete ) && o.complete.apply(this, arguments); $.isFunction( o.complete ) && o.complete.apply( this, arguments );
next(); next();
} }
}); });
Expand Down
4 changes: 2 additions & 2 deletions ui/jquery.effects.explode.js
Expand Up @@ -14,11 +14,11 @@


$.effects.effect.explode = function( o, next ) { $.effects.effect.explode = function( o, next ) {


var rows = o.pieces ? Math.round(Math.sqrt(o.pieces)) : 3, var rows = o.pieces ? Math.round( Math.sqrt( o.pieces ) ) : 3,
cells = rows, cells = rows,
el = $( this ), el = $( this ),
mode = $.effects.setMode( el, o.mode || "hide" ), mode = $.effects.setMode( el, o.mode || "hide" ),
show = ( mode == "show" ), show = mode === "show",


// show and then visibility:hidden the element before calculating offset // show and then visibility:hidden the element before calculating offset
offset = el.show().css( "visibility", "hidden" ).offset(), offset = el.show().css( "visibility", "hidden" ).offset(),
Expand Down
34 changes: 21 additions & 13 deletions ui/jquery.effects.fold.js
Expand Up @@ -16,15 +16,18 @@ $.effects.effect.fold = function( o, next ) {


// Create element // Create element
var el = $( this ), var el = $( this ),
props = ["position","top","bottom","left","right","height","width"], props = [ "position", "top", "bottom", "left", "right", "height", "width" ],
mode = $.effects.setMode(el, o.mode || "hide"), mode = $.effects.setMode( el, o.mode || "hide" ),
show = mode === "show",
hide = mode === "hide",
size = o.size || 15, size = o.size || 15,
percent = /([0-9]+)%/.exec(size), percent = /([0-9]+)%/.exec( size ),
horizFirst = !!o.horizFirst, horizFirst = !!o.horizFirst,
widthFirst = ((mode == "show") != horizFirst), widthFirst = show != horizFirst,
ref = widthFirst ? ["width", "height"] : ["height", "width"], ref = widthFirst ? [ "width", "height" ] : [ "height", "width" ],
duration = o.duration / 2, duration = o.duration / 2,
wrapper, distance; wrapper, distance,
animation1 = {}, animation2 = {};


$.effects.save( el, props ); $.effects.save( el, props );
el.show(); el.show();
Expand All @@ -38,29 +41,34 @@ $.effects.effect.fold = function( o, next ) {
[ wrapper.height(), wrapper.width() ]; [ wrapper.height(), wrapper.width() ];


if ( percent ) { if ( percent ) {
size = parseInt( percent[ 1 ], 10 ) / 100 * distance[ ( mode == "hide") ? 0 : 1 ]; size = parseInt( percent[ 1 ], 10 ) / 100 * distance[ hide ? 0 : 1 ];
} }
mode == "show" && wrapper.css( horizFirst ? { if ( show ) {
wrapper.css( horizFirst ? {
height: 0, height: 0,
width: size width: size
} : { } : {
height: size, height: size,
width: 0 width: 0
}); });
}


// Animation // Animation
var animation1 = {}, animation2 = {}; animation1[ ref[ 0 ] ] = show ? distance[ 0 ] : size;
animation1[ ref[ 0 ] ] = mode == "show" ? distance[ 0 ] : size; animation2[ ref[ 1 ] ] = show ? distance[ 1 ] : 0;
animation2[ ref[ 1 ] ] = mode == "show" ? distance[ 1 ] : 0;


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


Expand Down
11 changes: 7 additions & 4 deletions ui/jquery.effects.highlight.js
Expand Up @@ -20,7 +20,7 @@ $.effects.effect.highlight = function( o, next ) {
backgroundColor: elem.css( "backgroundColor" ) backgroundColor: elem.css( "backgroundColor" )
}; };


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


Expand All @@ -37,10 +37,13 @@ $.effects.effect.highlight = function( o, next ) {
duration: o.duration, duration: o.duration,
easing: o.easing, easing: o.easing,
complete: function() { complete: function() {
(mode == "hide" && elem.hide()); if ( mode === "hide" ) {
elem.hide();
}
$.effects.restore( elem, props ); $.effects.restore( elem, props );
(mode == "show" && !$.support.opacity && this.style.removeAttribute( "filter" )); if ( $.isFunction( o.complete) ) {
jQuery.isFunction(o.complete) && o.complete.apply(this, arguments); o.complete.apply( this, arguments );
}
next(); next();
} }
}); });
Expand Down
5 changes: 3 additions & 2 deletions ui/jquery.effects.scale.js
Expand Up @@ -24,6 +24,7 @@ function compFunction( el, complete, next ) {
$.effects.effect.puff = function( o, next ) { $.effects.effect.puff = function( o, next ) {
var elem = $( this ), var elem = $( this ),
mode = $.effects.setMode( elem, o.mode || "hide" ), mode = $.effects.setMode( elem, o.mode || "hide" ),
hide = mode === "hide",
percent = parseInt( o.percent, 10 ) || 150, percent = parseInt( o.percent, 10 ) || 150,
factor = percent / 100, factor = percent / 100,
original = { original = {
Expand All @@ -37,8 +38,8 @@ $.effects.effect.puff = function( o, next ) {
fade: true, fade: true,
mode: mode, mode: mode,
complete: compFunction( this, o.complete, next ), complete: compFunction( this, o.complete, next ),
percent: mode == "hide" ? percent : 100, percent: hide ? percent : 100,
from: mode == "hide" from: hide
? original ? original
: { : {
height: original.height * factor, height: original.height * factor,
Expand Down
12 changes: 7 additions & 5 deletions ui/jquery.effects.shake.js
Expand Up @@ -23,7 +23,7 @@ $.effects.effect.shake = function( o, next ) {
anims = times * 2 + 1, anims = times * 2 + 1,
speed = o.duration, speed = o.duration,
ref = (direction == "up" || direction == "down") ? "top" : "left", ref = (direction == "up" || direction == "down") ? "top" : "left",
motion = (direction == "up" || direction == "left") ? "pos" : "neg", positiveMotion = (direction == "up" || direction == "left"),
animation = {}, animation = {},
animation1 = {}, animation1 = {},
animation2 = {}, animation2 = {},
Expand All @@ -39,9 +39,9 @@ $.effects.effect.shake = function( o, next ) {
$.effects.createWrapper( el ); $.effects.createWrapper( el );


// Animation // Animation
animation[ ref ] = ( motion == "pos" ? "-=" : "+=" ) + distance; animation[ ref ] = ( positiveMotion ? "-=" : "+=" ) + distance;
animation1[ ref ] = ( motion == "pos" ? "+=" : "-=" ) + distance * 2; animation1[ ref ] = ( positiveMotion ? "+=" : "-=" ) + distance * 2;
animation2[ ref ] = ( motion == "pos" ? "-=" : "+=" ) + distance * 2; animation2[ ref ] = ( positiveMotion ? "-=" : "+=" ) + distance * 2;


// Animate // Animate
el.animate( animation, speed, o.easing ); el.animate( animation, speed, o.easing );
Expand All @@ -59,7 +59,9 @@ $.effects.effect.shake = function( o, next ) {
} }
$.effects.restore( el, props ); $.effects.restore( el, props );
$.effects.removeWrapper( el ); $.effects.removeWrapper( el );
$.isFunction( o.complete ) && o.complete.apply( this, arguments ); if ( $.isFunction( o.complete ) ) {
o.complete.apply( this, arguments );
}
next(); next();
}); });


Expand Down
21 changes: 12 additions & 9 deletions ui/jquery.effects.slide.js
Expand Up @@ -18,32 +18,33 @@ $.effects.effect.slide = function( o, next ) {
var el = $( this ), var el = $( this ),
props = [ "position", "top", "bottom", "left", "right", "width", "height" ], props = [ "position", "top", "bottom", "left", "right", "width", "height" ],
mode = $.effects.setMode( el, o.mode || "show" ), mode = $.effects.setMode( el, o.mode || "show" ),
show = mode === "show",
direction = o.direction || "left", direction = o.direction || "left",
ref = (direction == "up" || direction == "down") ? "top" : "left", ref = (direction == "up" || direction == "down") ? "top" : "left",
motion = (direction == "up" || direction == "left") ? "pos" : "neg", positiveMotion = (direction == "up" || direction == "left"),
distance, distance,
animation = {}, animation = {},
size; size;


// Adjust // Adjust
$.effects.save( el, props ); $.effects.save( el, props );
el.show(); el.show();
distance = o.distance || el[ ref == "top" ? "outerHeight" : "outerWidth" ]({ distance = o.distance || el[ ref === "top" ? "outerHeight" : "outerWidth" ]({
margin: true margin: true
}); });


$.effects.createWrapper( el ).css({ $.effects.createWrapper( el ).css({
overflow: "hidden" overflow: "hidden"
}); });


if (mode == "show") { if ( show ) {
el.css( ref, motion == "pos" ? (isNaN(distance) ? "-" + distance : -distance) : distance ); el.css( ref, positiveMotion ? (isNaN(distance) ? "-" + distance : -distance) : distance );
} }


// Animation // Animation
animation[ ref ] = ( mode == "show" ? animation[ ref ] = ( show ?
(motion == "pos" ? "+=" : "-=") : ( positiveMotion ? "+=" : "-=") :
(motion == "pos" ? "-=" : "+=")) ( positiveMotion ? "-=" : "+="))
+ distance; + distance;


// Animate // Animate
Expand All @@ -52,12 +53,14 @@ $.effects.effect.slide = function( o, next ) {
duration: o.duration, duration: o.duration,
easing: o.easing, easing: o.easing,
complete: function() { complete: function() {
if ( mode == "hide" ) { if ( mode === "hide" ) {
el.hide(); el.hide();
} }
$.effects.restore( el, props ); $.effects.restore( el, props );
$.effects.removeWrapper( el ); $.effects.removeWrapper( el );
$.isFunction(o.complete) && o.complete.apply( this, arguments ); if ( $.isFunction( o.complete ) ) {
o.complete.apply( this, arguments );
}
next(); next();
} }
}); });
Expand Down
4 changes: 3 additions & 1 deletion ui/jquery.effects.transfer.js
Expand Up @@ -39,7 +39,9 @@ $.effects.effect.transfer = function( o, next ) {
}) })
.animate( animation, o.duration, o.easing, function() { .animate( animation, o.duration, o.easing, function() {
transfer.remove(); transfer.remove();
$.isFunction( o.complete ) && o.complete.apply(elem[0], arguments); if ( $.isFunction( o.complete ) ) {
o.complete.apply( elem[0], arguments );
}
next(); next();
}); });
}; };
Expand Down

0 comments on commit 65a6c46

Please sign in to comment.