Dojoの fadeIn、fadeOut

  1. dojo.fxモジュールを読み込む。
  2. dojo.fadeIn、dojo.fadeOut 関数でアニメーションオブジェクトを作る。
  3. play() メソッドを呼ぶ。
<html>
<head>
<script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dojo.fx"); 

function fade_in()
{
    dojo.fadeIn({node: dojo.byId('div1'), duration:1000}).play();
}

function fade_out()
{
    dojo.fadeOut({node: 'div1', duration:1000}).play();
}

</script>

<style type="text/css">
@import "dijit/themes/tundra/tundra.css";
@import "dojo/resources/dojo.css";

div#div1 {
    position: absolute;
    left: 100px;
    top: 100px;
    width: 200px;
    height: 100px;
    background-color: blue;
    visibility: 'hidden';
}
</style>
</head>
<body class="tundra">
<button onclick="fade_out()">Fade Out</button>
<br>
<button onclick="fade_in()">Fade In</button>
<div id="div1">
<br>
</div>

</body>
</html>

「Fade Out」・「Fade In」ボタンを交互にクリックすると青い四角が消えたり、再び表示されたりする。