<button id="slideAwayButton">Slide block away</button>
<button id="slideBackButton">Slide block back</button>
<div id="slideTarget" class="red-block slide">
A red block
</div>
<script>
dojo.require("dojo.fx");
dojo.ready(function(){
var slideAwayButton = dojo.byId("slideAwayButton"),
slideBackButton = dojo.byId("slideBackButton"),
slideTarget = dojo.byId("slideTarget");
dojo.connect(slideAwayButton, "onclick", function(evt){
var anim = dojo.fx.slideTo({
node: slideTarget,
left: "200",
top: "200",
beforeBegin: function(){
dojo.style(slideTarget, {
left: "0px",
top: "100px"
});
}
});
dojo.connect(anim, "onEnd", function(){
dojo.style(slideTarget, {
backgroundColor: "blue"
});
});
anim.play();
});
dojo.connect(slideBackButton, "onclick", function(evt){
var anim = dojo.fx.slideTo({
node: slideTarget,
left: "0",
top: "100",
beforeBegin: function(){
dojo.style(slideTarget, {
left: "200px",
top: "200px"
});
}
});
dojo.connect(anim, "onEnd", function(){
dojo.style(slideTarget, {
backgroundColor: "red"
});
});
anim.play();
});
});
</script>
Animation Events
最新推荐文章于 2023-12-03 12:04:29 发布