Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

slideUp/Down Sequences v2.0 #121

Closed
wants to merge 3 commits into from
Closed

slideUp/Down Sequences v2.0 #121

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
703c07e
slideUp slideDown tweaks
legomushroom Jun 23, 2014
88fd8f7
diff box models animation bug fix
legomushroom Jun 23, 2014
6ee44e3
minor improvements
legomushroom Jun 23, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,7 @@ Gruntfile.js
velocity.js
velocity.min.js
velocity.jquery-shim.js
velocity.spring.js
velocity.spring.js

bower_components/
test/
75 changes: 56 additions & 19 deletions jquery.velocity.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2329,7 +2329,7 @@ The biggest cause of both codebase bloat and codepath obfuscation is support for
which chain after the current call. Two reverse calls (two "alternations") constitute one loop. */
var opts = $.extend({}, Velocity.defaults, options),
reverseCallsCount;

opts.loop = parseInt(opts.loop);
reverseCallsCount = (opts.loop * 2) - 1;

Expand All @@ -2351,6 +2351,8 @@ The biggest cause of both codebase bloat and codepath obfuscation is support for
}
}



/***************
Chaining
***************/
Expand All @@ -2371,7 +2373,8 @@ The biggest cause of both codebase bloat and codepath obfuscation is support for
by the same Velocity call -- are properly batched into the same initial RAF tick and consequently remain in sync thereafter. */
if (timestamp) {
/* We ignore RAF's high resolution timestamp since it can be significantly offset when the browser is under high stress; we opt for choppiness over allowing the browser to drop huge chunks of frames. */
var timeCurrent = (new Date).getTime();
var timeCurrent = (new Date).getTime(),
isSkipped;

/********************
Call Iteration
Expand Down Expand Up @@ -2416,6 +2419,9 @@ The biggest cause of both codebase bloat and codepath obfuscation is support for
var tweensContainer = call[j],
element = tweensContainer.element;

isSkipped = element.isSkipped;


/* Check to see if this element has been deleted midway through the animation by checking for the continued existence of its data cache. If it's gone, skip animating this element. */
if (!$.data(element, NAME)) {
continue;
Expand Down Expand Up @@ -2534,14 +2540,17 @@ The biggest cause of both codebase bloat and codepath obfuscation is support for
}

/* Pass the elements and the timing data (percentComplete, msRemaining, and timeStart) into the progress callback. */
if (opts.progress) {
opts.progress.call(callContainer[1], callContainer[1], percentComplete, Math.max(0, (timeStart + opts.duration) - timeCurrent), timeStart);
/* If the tween wasn't skipped */
if (opts.progress && !isSkipped) {
opts.progress.call(callContainer[1], callContainer[1], percentComplete, Math.max(0, (timeStart + opts.duration) - timeCurrent), timeStart, callContainer);
}

/* If this call has finished tweening, pass its index to completeCall() to handle call cleanup. */
if (percentComplete === 1) {
/* Or if this tween was skipped */
if (percentComplete === 1 || isSkipped) {
completeCall(i);
}

}
}

Expand Down Expand Up @@ -2691,13 +2700,8 @@ The biggest cause of both codebase bloat and codepath obfuscation is support for
/* slideUp, slideDown */
$.each([ "Down", "Up" ], function(i, direction) {
Velocity.Sequences["slide" + direction] = function (element, options) {
/* Don't re-run a slide sequence if the element is already at its final display value. */
//if ((direction === "Up" && Velocity.CSS.getPropertyValue(element, "display") === 0) ||
// (direction === "Down" && Velocity.CSS.getPropertyValue(element, "display") !== 0)) {
// return;
//}

var opts = $.extend({}, options),
startDisplay= null,
originalValues = {
height: null,
marginTop: null,
Expand All @@ -2719,17 +2723,34 @@ The biggest cause of both codebase bloat and codepath obfuscation is support for
if (direction === "Down") {
/* All elements subjected to sliding down are set to the "block" display value (-- )as opposed to an element-appropriate block/inline distinction) because inline elements cannot actually have their dimensions modified. */
opts.display = opts.display || Velocity.CSS.Values.getDisplayType(element);
opts.type = 'show';
} else {
opts.display = opts.display || "none";
opts.type = 'hide';
}
}

/* Begin callback. */
opts.begin = function () {
var startDisplay = Velocity.CSS.getPropertyValue(element, "display"),
isAlreadyHidden = (startDisplay == 0 && opts.type == 'hide'),
isAlreadyShown = (startDisplay != 0 && opts.type == 'show');

element.isSkipped = (isAlreadyHidden || isAlreadyShown);

if (element.isSkipped) return;

/* Check for height: "auto" so we can revert back to it when the sliding animation is complete. */
function checkHeightAuto() {
element.style.display = "block";
originalValues.height = Velocity.CSS.getPropertyValue(element, "height");

/* Depending on `content-box` or `border-box` box model,
browser will return number(1) or string(2) for element's
height, parseInt intent to normalize this */
var height = Velocity.CSS.getPropertyValue(element, "height"),
value;
height = parseInt(height, 10);
originalValues.height = height;

/* We determine if height was originally set to "auto" by checking if the computed "auto" value is identical to the original value. */
element.style.height = "auto";
Expand All @@ -2748,9 +2769,9 @@ The biggest cause of both codebase bloat and codepath obfuscation is support for
originalValues.overflowY = [ Velocity.CSS.getPropertyValue(element, "overflowY"), 0 ];

/* Ensure the element is visible, and temporarily remove vertical scrollbars since animating them is visually unappealing. */
element.style.overflow = "hidden";
element.style.overflowX = "visible";
element.style.overflowY = "hidden";
element.style.overflow = "hidden";
//element.style.overflowX = "visible";
//element.style.overflowY = "hidden";

/* With the scrollars no longer affecting sizing, determine whether the element is currently set to height: "auto". */
checkHeightAuto();
Expand All @@ -2763,7 +2784,14 @@ The biggest cause of both codebase bloat and codepath obfuscation is support for
}

/* Use forcefeeding to animate slideDown properties from 0. */
originalValues[property] = [ Velocity.CSS.getPropertyValue(element, property), 0 ];
/* Depending on `content-box` or `border-box` box model,
browser will return number(1) or string(2) for element's
height, parseInt intent to normalize this */
value = Velocity.CSS.getPropertyValue(element, property);
if (property === 'height'){
value = parseInt(value, 10)
}
originalValues[property] = [ value, 0 ];
}

/* Hide the element inside this begin callback, otherwise it'll momentarily flash itself before the actual animation tick begins. */
Expand All @@ -2773,13 +2801,20 @@ The biggest cause of both codebase bloat and codepath obfuscation is support for

for (var property in originalValues) {
/* Use forcefeeding to animate slideUp properties toward 0. */
originalValues[property] = [ 0, Velocity.CSS.getPropertyValue(element, property) ];
/* Depending on `content-box` or `border-box` box model,
browser will return number(1) or string(2) for element's
height, parseInt intent to normalize this */
value = Velocity.CSS.getPropertyValue(element, property);
if (property === 'height'){
value = parseInt(value, 10)
}
originalValues[property] = [ 0, value ];
}

/* As with slideDown, slideUp hides the element's scrollbars while animating since scrollbar height tweening looks unappealing. */
element.style.overflow = "hidden";
element.style.overflowX = "visible";
element.style.overflowY = "hidden";
//element.style.overflowX = "visible";
//element.style.overflowY = "hidden";
}

/* If the user passed in a begin callback, fire it now. */
Expand All @@ -2790,6 +2825,8 @@ The biggest cause of both codebase bloat and codepath obfuscation is support for

/* Complete callback. */
opts.complete = function (element) {
if (element.isSkipped) return;

var propertyValuePosition = (direction === "Down") ? 0 : 1;

if (isHeightAuto === true) {
Expand Down