collapseHorizontal (duration, targetWidth, 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
duration
Integer
An integer value in milliseconds.
targetWidth
String or Numeric
A valid CSS string value in pixels or rems, or a valid numeric value in pixels.
callback
Function
A function to be called when the transition has completed.
<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>
webui.ready(function() {
ui(".container").collapseHorizontal(3000, 20, function(el) {
console.log("Transition completed for " + el.attr("id"));
});
});
collapseVertical (duration, targetHeight, 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
duration
Integer
An integer value in milliseconds.
targetHeight
String or Numeric
A valid CSS string value in pixels or rems, or a valid numeric value in pixels.
callback
Function
A function to be called when the transition has completed.
<div class="width-xl">
<div class="flex-row gap-horizontal-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>
webui.ready(function() {
ui(".container").collapseVertical(3000, "1rem", function(el) {
console.log("Transition completed for " + el.attr("id"));
});
});
expandHorizontal (duration, targetWidth, 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
duration
Integer
An integer value in milliseconds.
targetWidth
String or Numeric
A valid CSS string value in pixels or rems, or a valid numeric value in pixels.
callback
Function
A function to be called when the transition has completed.
<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>
webui.ready(function() {
ui(".container").expandHorizontal(3000, "20rem", function(el) {
console.log("Transition completed for " + el.attr("id"));
});
});
expandVertical (duration, targetHeight, 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
duration
Integer
An integer value in milliseconds.
targetHeight
String or Numeric
A valid CSS string value in pixels or rems, or a valid numeric value in pixels.
callback
Function
A function to be called when the transition has completed.
<div class="width-xl">
<div class="flex-row gap-horizontal-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>
webui.ready(function() {
ui(".container").expandVertical(3000, "20rem", function(el) {
console.log("Transition completed for " + el.attr("id"));
});
});
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 transition has completed.
<div class="width-xl">
<div class="flex-row gap-horizontal-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>
webui.ready(function() {
ui(".container").fadeIn(5000, 0.1, function(el) {
console.log("Transition completed for " + el.attr("id"));
});
});
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 transition has completed.
<div class="width-xl">
<div class="flex-row gap-horizontal-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>
webui.ready(function() {
ui(".container").fadeOut(5000, 0.2, function(el) {
console.log("Transition completed for " + el.attr("id"));
});
});
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 transition has completed.
<div class="width-lg">
<div class="flex-row 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>
webui.ready(function() {
ui(".container").slideHorizontal("right", 100, 5000, function(el) {
console.log("Transition completed for " + el.attr("id"));
});
});
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 transition has completed.
<div class="width-xl">
<div class="flex-row gap-horizontal-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>
webui.ready(function() {
ui(".container").slideVertical("down", 100, 5000, function(el) {
console.log("Transition completed for " + el.attr("id"));
});
});
animate (animateWhat, delta, propertyValue, 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 animnation.
propertyValue
String or numeric
The CSS property value, e.g. "10rem".
duration
Integer
An integer value in milliseconds.
callback
Function
A function to be called when the transition has completed.
<div id="elementToAnimate" class="width-sm height-sm background-dark place-top-right"></div>
webui.ready(function() {
ui("#elementToAnimate").animate("top", 1, "200px", 3000, function(el) {
console.log(el[0]);
ui("#elementToAnimate").animate("right", 1, "15rem", 1000, function(el) {
console.log(el[0]);
});
});
});
