Page MenuHomeCode
Files F1128142

test_easing.html
No OneTemporary
Actions

test_easing.html
View Options

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>dojox.fx.easing functions:</title>
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true" ></script>
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/themes/dijit.css";
@import "../../../dijit/themes/tundra/tundra.css";
@import "../../../dijit/tests/css/dijitTests.css";
.block {
width:200px;
height:100px;
background:#666;
border:1px solid #ccc;
display:block;
color:#fff;
text-align:center;
}
</style>
<script type="text/javascript">
dojo.require("dojo.fx"); // chain and combine should be in core :) (when they work)
dojo.require("dojox.fx.easing");
var allAnim = null;
dojo.addOnLoad(function(){
var easeInAnim = dojo.fx.chain([
dojo.fadeOut({
node: 'easeIn',
duration:2000,
easing: dojox.fx.easing.easeIn
}),
dojo.fadeIn({
node: 'easeIn',
duration:2000,
easing: dojox.fx.easing.easeIn
})
]);
var easeOutAnim = dojo.fx.chain([
dojo.fadeOut({
node: 'easeOut',
duration:2000,
easing: dojox.fx.easing.easeOut
}),
dojo.fadeIn({
node: 'easeOut',
duration:2000,
easing: dojox.fx.easing.easeOut
})
]);
var easeInOutAnim = dojo.fx.chain([
dojo.fadeOut({
node: 'easeInOut',
duration:2000,
easing: dojox.fx.easing.easeInOut
}),
dojo.fadeIn({
node: 'easeInOut',
duration:2000,
easing: dojox.fx.easing.easeInOut
})
]);
dojo.connect(dojo.byId('easeIn'),"onclick",easeInAnim,"play");
dojo.connect(dojo.byId('easeOut'),"onclick",easeOutAnim,"play");
dojo.connect(dojo.byId('easeInOut'),"onclick",easeInOutAnim,"play");
// argh! FIXME: combine and chain are destructive to the animations. :(
// allAnim = dojo.fx.combine([easeInAnim,easeOutAnim,easeInOutAnim]);
allAnim = { play: function(){
console.log("can't do this via fx.combine - destructive");
easeInAnim.play();
easeOutAnim.play();
easeInOutAnim.play();
}
};
}); // dojo.addOnLoad
</script>
</head>
<body class="tundra">
<h1 class="testTitle">dojox.fx.easing function tests:</h1>
(click block to play animation, or <a href="#" onclick="allAnim.play()">here to do all three</a>)
<div id="easeIn" class="block">dojox.fx.easing.easeIn</div>
<br><br>
<div id="easeOut" class="block">dojox.fx.easing.easeOut</div>
<br><br>
<div id="easeInOut" class="block">dojox.fx.easing.easeInOut</div>
<p>
dojox.fx.easing is stand-alone, and does not require the dojox.fx base files.
</p>
</body>
</html>

File Metadata

Mime Type
text/html
Expires
Fri, Jun 20, 04:07 (2 w, 4 d ago)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
26692
Default Alt Text
test_easing.html (2 KB)

Event Timeline