Dojoの fadeIn、fadeOut
<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」ボタンを交互にクリックすると青い四角が消えたり、再び表示されたりする。