You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
100 lines
2.1 KiB
100 lines
2.1 KiB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
|
"http://www.w3.org/TR/html4/strict.dtd" |
|
> |
|
<html lang="en"> |
|
<head> |
|
<title>Test dojox.fx.ext-dojo.reverse</title> |
|
<style> |
|
@import "../../../dijit/tests/css/dijitTests.css"; |
|
body{ |
|
font-family:sans-serif; |
|
} |
|
p{ |
|
width:700px; |
|
font-size:12px; |
|
} |
|
.wrap{ |
|
|
|
} |
|
.lft{ |
|
width:300px; |
|
height:300px; |
|
border:1px solid #666; |
|
position:relative; |
|
float:left; |
|
} |
|
#ball{ |
|
width:50px; |
|
height:50px; |
|
margin:0px auto; |
|
top:125px; |
|
position:relative; |
|
border:1px solid #000; |
|
background:#0000ff; |
|
} |
|
|
|
</style> |
|
|
|
<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug:true, parseOnLoad: true" ></script> |
|
<script> |
|
dojo.require("dojox.fx.ext-dojo.reverse"); |
|
dojo.addOnLoad(function(){ |
|
var ani = dojo.animateProperty({ |
|
node:dojo.byId("ball"), |
|
duration:1000, |
|
easing:dojo.fx.easing.bounceOut, |
|
properties:{ |
|
width:{ |
|
start:50, |
|
end:150, |
|
units:"px" |
|
}, |
|
height:{ |
|
start:50, |
|
end:150, |
|
units:"px" |
|
}, |
|
top:{ |
|
start:125, |
|
end:75, |
|
units:"px" |
|
}, |
|
opacity:{ |
|
start:1, |
|
end:.2 |
|
}, |
|
backgroundColor:{ |
|
start:"#0000ff", |
|
end:"#ff0000" |
|
} |
|
} |
|
}); |
|
ani.play(); |
|
|
|
dojo.connect(dojo.byId("btn"), "click", function(){ |
|
ani.reverse(); |
|
}) |
|
}); |
|
|
|
</script> |
|
</head> |
|
<body> |
|
<h1>Test dojo.fx.reverse</h1> |
|
<p> |
|
This is a test for the dojo.Animation extension, dojox.fx.ext-dojo.reverse. |
|
To use, simply require <em>dojox.fx.ext-dojo.reverse</em> and a reverse() method |
|
will be added to all dojo.Animations. |
|
</p> |
|
<p> |
|
dojox.fx.ext-dojo.reverse can be used at any time during the animation. It does not |
|
need to be called when it ends. It also reverses the easing — if dojo.fx.easing.quadIn |
|
is used, dojo.fx.easing.quadOut will be used when animating backwards. |
|
</p> |
|
<button id="btn">Reverse</button> |
|
<div class="wrap"> |
|
<div class="lft"> |
|
<div id="ball"></div> |
|
</div> |
|
</div> |
|
</body> |
|
</html>
|
|
|