| Simulated slide with dojo
|
toplisek
msg:4395979 | 1:44 pm on Dec 9, 2011 (gmt 0) |
I like to set the same slide as code from website demos like:
[dojocampus.org...]
What I have to change to work slide?
Posted on this URL:
<script type="text/javascript">
//Note that you have to require "dojo.fx" to use the slide methods.
//These are not included in the base.
dojo.require("dojo.fx");
var slideRight = dojo.fx.slideTo({node: "animDiv",duration: 1000, left: 300, top: 80});
var slideLeft = dojo.fx.slideTo({node: "animDiv",duration: 1000, left: 0, top:80});
var currentAnimation;
function doAnimation(index) {
if(currentAnimation && currentAnimation.status() != "stopped"){
return;//do not interrupt a running animation
}
console.log("doAnimation " + index);
switch(index) {
case 1:
currentAnimation = slideRight;
break;
case 2:
currentAnimation = slideLeft;
break;
case 3:
//Chain two animations to run in sequence.
//Note the array passed as an argument.
currentAnimation = dojo.fx.chain([slideRight, slideLeft, slideRight, slideLeft]);
break;
}
if (currentAnimation) {
//Play the animation. Without this call, it will not run.
dojo.connect(currentAnimation, "onEnd", function(){
currentAnimation = null;
});
currentAnimation.play();
}
}
function pauseAnimation(){
if(currentAnimation && currentAnimation.status() == "playing"){
currentAnimation.pause();
}
}
function resumeAnimation(){
if(currentAnimation && currentAnimation.status() == "paused"){
currentAnimation.play();
}
}
</script>
<style type="text/css">
.box {
margin-top: 10px;
color: #292929;
width: 300px;
top: 80px;
position: absolute;
border: 1px solid #BABABA;
background-color: #ddd;
padding-left: 10px;
padding-right: 10px;
margin-left: 10px;
margin-bottom: 1em;
-o-border-radius: 10px;
-moz-border-radius: 12px;
-webkit-border-radius: 10px;
-webkit-box-shadow: 0px 3px 7px #adadad;
border-radius: 10px;
-moz-box-sizing: border-box;
-opera-sizing: border-box;
-webkit-box-sizing: border-box;
-khtml-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
}
</style>
<button dojoType="dijit.form.Button" onClick="doAnimation(1);">Slide Right</button>
<button dojoType="dijit.form.Button" onClick="doAnimation(2);">Slide Left</button>
<button dojoType="dijit.form.Button" onClick="doAnimation(3);">Slide Right Then Left</button>
<br/>
<button dojoType="dijit.form.Button" onClick="pauseAnimation(2);">Pause</button>
<button dojoType="dijit.form.Button" onClick="resumeAnimation(2);">Resume</button>
<div id="animDiv" class="box">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
semper sagittis velit. Cras in mi. Duis porta mauris ut ligula.
Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla
facilisi. Maecenas luctus venenatis nulla. In sit amet dui non mi
semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum
magna. Sed vitae risus.
</p>
</div>
© 2008 The Dojo Foundation, All Rights Reserved. | Hosting generous
|
|
