collapseHorizontal (options, callback)
Collapses each element in the set of matched elements horizontally, for the specified duration and to the specified target width, and optionally with a callback.
Returns - WebUI object.
Argument
Type
Description
options
Object
A JavaScript object
callback
Function
A function to be called when the animation has completed.
options
Property
Type
Description
duration
Integer
An integer value in milliseconds. Default: 300.
targetWidth
String or Numeric
A valid CSS string value in pixels, rems, percentage, or a valid numeric value in pixels. Default: "auto".
paddingLeft
numeric
A valid numeric value specifying the amount of left padding to be animated. Default: 0.
paddingRight
numeric
A valid numeric value specifying the amount of right padding to be animated. Default: 0.
borderLeftWidth
numeric
A valid numeric value specifying the left border width to be animated. Default: 0.
borderRightWidth
numeric
A valid numeric value specifying the right border width to be animated. Default: 0.
<div class="width-lg">
<div class="flex-col gap-sm">
<div class="container flex-auto height-sm border-sm border-dark" id="div1"></div>
<div class="container flex-auto height-sm border-sm border-dark" id="div2"></div>
</div>
</div>
HTML
webui.ready( () => {
ui(".container").collapseHorizontal({ duration: 3000, targetWidth: 20 }, (el) => {
console.log("Transition completed for " + el.attr("id"));
});
});
JS
collapseVertical (options, callback)
Collapses each element in the set of matched elements vertically, for the specified duration and to the specified target height, and optionally with a callback.
Returns - WebUI object.
Argument
Type
Description
options
Object
A JavaScript object
callback
Function
A function to be called when the animation has completed.
options
Property
Type
Description
duration
Integer
An integer value in milliseconds. Default: 300.
targetHeight
String or Numeric
A valid CSS string value in pixels, rems, percentage, or a valid numeric value in pixels. Default: "auto".
paddingTop
numeric
A valid numeric value specifying the amount of top padding to be animated. Default: 0.
paddingBottom
numeric
A valid numeric value specifying the amount of bottom padding to be animated. Default: 0.
borderTopWidth
numeric
A valid numeric value specifying the top border width to be animated. Default: 0.
borderBottomWidth
numeric
A valid numeric value specifying the bottom border width to be animated. Default: 0.
<div class="width-xl">
<div class="flex-row gap-sm">
<div class="container flex-auto height-sm border-sm border-dark" id="div1"></div>
<div class="container flex-auto height-sm border-sm border-dark" id="div2"></div>
</div>
</div>
HTML
webui.ready( () => {
ui(".container").collapseVertical({ duration: 3000, targetHeight: "1rem" }, (el) => {
console.log("Transition completed for " + el.attr("id"));
});
});
JS
expandHorizontal (options, callback)
Expands each element in the set of matched elements horizontally, for the specified duration and to the specified target width, and optionally with a callback.
Returns - WebUI object.
Argument
Type
Description
options
Object
A JavaScript object
callback
Function
A function to be called when the animation has completed.
options
Property
Type
Description
duration
Integer
An integer value in milliseconds. Default: 300.
targeWidth
String or Numeric
A valid CSS string value in pixels, rems, percentage, or a valid numeric value in pixels. Default: "auto".
initialWidth
Numeric
A valid numeric value in the units specified by targetWidth. Default: null.
displayType
String
A valid CSS display value. Default: "block".
paddingLeft
numeric
A valid numeric value specifying the amount of left padding to be animated. Default: 0.
paddingRight
numeric
A valid numeric value specifying the amount of right padding to be animated. Default: 0.
borderLeftWidth
numeric
A valid numeric value specifying the left border width to be animated. Default: 0.
borderRightWidth
numeric
A valid numeric value specifying the right border width to be animated. Default: 0.
<div class="width-lg">
<div class="flex-col gap-vertical-sm">
<div class="container flex-auto height-sm border-sm border-dark" id="div1"></div>
<div class="container flex-auto height-sm border-sm border-dark" id="div2"></div>
</div>
</div>
HTML
webui.ready( () => {
ui(".container").expandHorizontal({ duration: 3000, targetWidth: "20rem" }, (el) => {
console.log("Transition completed for " + el.attr("id"));
});
});
JS
expandVertical (options, callback)
Expands each element in the set of matched elements vertically, for the specified duration and to the specified target height, and optionally with a callback.
Returns - WebUI object.
Argument
Type
Description
options
Object
A JavaScript object
callback
Function
A function to be called when the animation has completed.
options
Property
Type
Description
duration
Integer
An integer value in milliseconds. Default: 300.
targeHeight
String or Numeric
A valid CSS string value in pixels, rems, percentage, or a valid numeric value in pixels. Default: "auto".
initialHeight
Numeric
A valid numeric value in the units specified by targetHeight. Default: null.
displayType
String
A valid CSS display value. Default: "block".
paddingTop
numeric
A valid numeric value specifying the amount of top padding to be animated. Default: 0.
paddingBottom
numeric
A valid numeric value specifying the amount of bottom padding to be animated. Default: 0.
borderTopWidth
numeric
A valid numeric value specifying the top border width to be animated. Default: 0.
borderBottomWidth
numeric
A valid numeric value specifying the bottom border width to be animated. Default: 0.
<div class="width-xl">
<div class="flex-row gap-sm">
<div class="container flex-auto height-sm border-sm border-dark" id="div1"></div>
<div class="container flex-auto height-sm border-sm border-dark" id="div2"></div>
</div>
</div>
HTML
webui.ready( () => {
ui(".container").expandVertical({ duration: 3000, targetHeight: "20rem" }, (el) => {
console.log("Transition completed for " + el.attr("id"));
});
});
JS
fadeIn (duration, initialOpacity, callback)
Eases in the opacity each element in the set of matched elements horizontally, for the specified duration and starting at the initial opacity, and optionally with a callback.
Returns - WebUI object.
Argument
Type
Description
duration
Integer
An integer value in milliseconds.
initialOpacity
Numeric
A value of between 0 and 1.
callback
Function
A function to be called when the animation has completed.
<div class="width-xl">
<div class="flex-row gap-sm">
<div class="container flex-auto height-sm border-sm border-dark" id="div1"></div>
<div class="container flex-auto height-sm border-sm border-dark" id="div2"></div>
</div>
</div>
HTML
webui.ready( () => {
ui(".container").fadeIn(5000, 0.1, function(el) {
console.log("Transition completed for " + el.attr("id"));
});
});
JS
fadeOut (duration, finalOpacity, callback)
Eases out the opacity each element in the set of matched elements horizontally, for the specified duration and ending at the final opacity, and optionally with a callback.
Returns - WebUI object.
Argument
Type
Description
duration
Integer
An integer value in milliseconds.
finalOpacity
Numeric
A value of between 0 and 1.
callback
Function
A function to be called when the animation has completed.
<div class="width-xl">
<div class="flex-row gap-sm">
<div class="container flex-auto height-sm border-sm border-dark" id="div1"></div>
<div class="container flex-auto height-sm border-sm border-dark" id="div2"></div>
</div>
</div>
HTML
webui.ready( () => {
ui(".container").fadeOut(2000, 0.2, function(el) {
console.log("Transition completed for " + el.attr("id"));
});
});
JS
slideHorizontal (direction, distance, duration, callback)
Moves each element in the set of matched elements left or right for the specified distance and duration, and optionally with a callback.
Returns - WebUI object.
Argument
Type
Description
direction
String
A value of "left" or "right".
distance
String or Numeric
A valid CSS string value in pixels or rems, or a valid numeric value in pixels.
duration
Integer
An integer value in milliseconds.
callback
Function
A function to be called when the animation has completed.
<div class="width-lg">
<div class="flex-row gap-sm">
<div class="container flex-auto height-sm border-sm border-dark" id="div1"></div>
<div class="container flex-auto height-sm border-sm border-dark" id="div2"></div>
</div>
</div>
HTML
webui.ready( () => {
ui(".container").slideHorizontal("right", 100, 3000, function(el) {
console.log("Transition completed for " + el.attr("id"));
});
});
JS
slideVertical (direction, distance, duration, callback)
Moves each element in the set of matched elements up or down for the specified distance and duration, and optionally with a callback.
Returns - WebUI object.
Argument
Type
Description
direction
String
A value of "up" or "down".
distance
String or Numeric
A valid CSS string value in pixels or rems, or a valid numeric value in pixels.
duration
Integer
An integer value in milliseconds.
callback
Function
A function to be called when the animation has completed.
<div class="width-xl">
<div class="flex-row gap-sm">
<div class="container flex-auto height-sm border-sm border-dark" id="div1"></div>
<div class="container flex-auto height-sm border-sm border-dark" id="div2"></div>
</div>
</div>
HTML
webui.ready( () => {
ui(".container").slideVertical("down", 100, 3000, function(el) {
console.log("Transition completed for " + el.attr("id"));
});
});
JS
animate (animateWhat, delta, propertyValue, limitValue, duration, callback)
Animates each element in the set of matched elements according the specified property and duration, and optionally with a callback.
Returns - WebUI object.
Argument
Type
Description
animateWhat
String
The CSS property that should be animated.
delta
Integer
Either 0 or 1 specifying the direction of the animation.
propertyValue
String or numeric
The CSS property value, e.g. "10rem".
limitValue
numeric
A value representing the starting or ending point of the animation, depending on the delta value, using the unit specified in propertyValue.
duration
Integer
An integer value in milliseconds.
callback
Function
A function to be called when the animation has completed.
<div id="elementToAnimate" class="width-sm height-sm background-dark place-top-left left-md top-md"> </div>
HTML
webui.ready( () => {
ui("#elementToAnimate").animate("top", 1, "15rem", 5, 1000, function(el) {
console.log(el[0]);
ui("#elementToAnimate").animate("left", 1, "15rem", 5, 1000, function(el) {
console.log(el[0]);
ui("#elementToAnimate").animate("top", 0, "15rem", 5, 1000, function(el) {
console.log(el[0]);
ui("#elementToAnimate").animate("left", 0, "15rem", 5, 1000, function(el) {
console.log(el[0]);
});
});
});
});
});
JS