dojo/fx::slideTo()¶
Authors: | Peter Higgins, Nikolai Onken, Marcus Reimann, Jared Jurkiewicz |
---|---|
Developers: | Bryan Forbes, Peter Higgins, Eugene Lazutkin, Bill Keese, Adam Peller, Alex Russell, Dylan Schiemann, sjmiles |
since: | V1.0 |
Contents
This function is a helper function that wraps the dojo/_base/fx::animateProperty() function to provide an easy interface to sliding a node from its current position to a
new position on the page. While this can be done with the animateProperty()
function, this function is simpler to
use and will handle 99% of the cases a wipe-out is desired.
NOTE: This function works best on absolutely positioned nodes.
Usage¶
Basic usage requires the node being moved, the top
and left
coordinates and the unit
s:
require(["dojo/fx"], function(coreFx){
coreFx.slideTo({
node: "someNode",
top: "40",
left: "50",
units: "px"
}).play();
});
The function configuration hash can take the other properties of dojo/_base/fx::animateProperty() <dojo/_base/fx#animateproperty>.
The slideTo()
function returns an instance of dojo/_base/fx::Animation. To start
the slide, call the .play()
function on the Animation. This object can be used with other Dojo animation
functions, such as dojo/fx::chain() and dojo/fx::combine() to link it
with other effects to perform complex animations.
Examples¶
This example allows you to slide a node to the left or the right by 200 pixels.
require(["dojo/fx", "dojo/dom", "dojo/dom-geometry", "dojo/on", "dojo/domReady!"],
function(coreFx, dom, domGeom, on){
function slideIt(amt){
coreFx.slideTo({
node: "basicNode",
top: domGeom.getMarginBox("basicNode").t.toString(),
left: (domGeom.getMarginBox("basicNode").l + amt).toString(),
unit: "px"
}).play();
}
on(dom.byId("slideRightButton"), "click", function(){
slideIt(200);
});
on(dom.byId("slideLeftButton"), "click", function(){
slideIt(-200);
});
});
<button type="button" id="slideLeftButton">Slide It Left!</button>
<button type="button" id="slideRightButton">Slide It Right!</button>
<br />
<br />
<div style="width: 100%; height: 120px;">
<div id="basicNode" style="width: 100px; height: 100px; background-color: red; position: absolute;"></div>
</div>
See Also¶
- dojo/fx - Overview of the core Dojo FX API
- dojo/_base/fx::animateProperty() - Details around the other options possible
- Animation Tutorial - The tutorial to find out about Dojo’s FX API