Skip to content

Commit

Permalink
Effects.*: Style Guidance
Browse files Browse the repository at this point in the history
  • Loading branch information
@gnarf
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
View file
Expand Up @@ -11,7 +11,7 @@
* jquery.effects.core.js
*/
(function( $, undefined ) {

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

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

distance = wrapper[ ref ]();

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

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

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

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

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

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

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

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

$.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,
el = $( this ),
mode = $.effects.setMode( el, o.mode || "hide" ),
show = ( mode == "show" ),
show = mode === "show",

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

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

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

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,
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 ] ] = show ? distance[ 0 ] : size;
animation2[ ref[ 1 ] ] = show ? distance[ 1 ] : 0;

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

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

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

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

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

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

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

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

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

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

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

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

0 comments on commit 65a6c46

Please sign in to comment.