git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dojo/tests/test_fx.html

   1 <!DOCTYPE html>
   2 <html>
   3         <head>
   4                 <style type="text/css">
   5                         @import "../resources/dojo.css";
   6                 </style>
   7                 <style type="text/css">
   8                         @import "../resources/dojo.css";
   9
  10                         body {
  11                                 text-shadow: 0px 0px;
  12                                 margin: 1em;
  13                                 background-color: #DEDEDE;
  14                         }
  15
  16                         .box {
  17                                 color: #292929;
  18                                 /* color: #424242; */
  19                                 /* text-align: left; */
  20                                 width: 300px;
  21                                 border: 1px solid #BABABA;
  22                                 background-color: white;
  23                                 padding-left: 10px;
  24                                 padding-right: 10px;
  25                                 margin-left: 10px;
  26                                 margin-bottom: 1em;
  27                                 -o-border-radius: 10px;
  28                                 -moz-border-radius: 12px;
  29                                 -webkit-border-radius: 10px;
  30                                 -webkit-box-shadow: 0px 3px 7px #adadad;
  31                                 /* -opera-border-radius: 10px; */
  32                                 border-radius: 10px;
  33                                 -moz-box-sizing: border-box;
  34                                 -opera-sizing: border-box;
  35                                 -webkit-box-sizing: border-box;
  36                                 -khtml-box-sizing: border-box;
  37                                 box-sizing: border-box;
  38                                 overflow: hidden;
  39                                 /* position: absolute; */
  40                         }
  41                 </style>
  42                 <script type="text/javascript" src="../dojo.js" djConfig="isDebug: true"></script>
  43                 <script type="text/javascript" src="../fx.js"></script>
  44                 <script type="text/javascript">
  45                         dojo.require("dojo.fx");
  46                         dojo.addOnLoad(function(){
  47                                 dojo.byId("foo").style.height = "0px";
  48                                 var w1 = dojo.fx.wipeIn({
  49                                         node: "foo",
  50                                         duration: 500
  51                                 });
  52                                 var f1 = dojo.fadeOut({
  53                                         node: "foo",
  54                                         duration: 500
  55                                 });
  56                                 var a1 = dojo.fx.chain([w1, f1]);
  57
  58                                 dojo.byId("foo").style.height = "0px";
  59                                 var w2 = dojo.fx.wipeIn({
  60                                         node: "foo",
  61                                         duration: 500
  62                                 });
  63                                 var f2 = dojo.fadeIn({
  64                                         node: "foo",
  65                                         duration: 1000
  66                                 });
  67                                 var a2 = dojo.fx.combine([w2, f2]);
  68
  69                                 dojo.connect(a1, "onEnd", function(){
  70                                         console.log("finish1");
  71                                         a2.play();
  72                                 });
  73                                 dojo.connect(a2, "onEnd", function(){
  74                                         console.log("finish2");
  75                                 });
  76                                 a1.play();
  77                         });
  78                 </script>
  79         </head>
  80         <body>
  81                 <div id="foo" class="box">
  82                         <p>
  83                         Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
  84                         semper sagittis velit. Cras in mi. Duis porta mauris ut ligula.
  85                         Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla
  86                         facilisi.  Maecenas luctus venenatis nulla. In sit amet dui non mi
  87                         semper iaculis.  Sed molestie tortor at ipsum. Morbi dictum rutrum
  88                         magna. Sed vitae risus.
  89                         </p>
  90                         <p>
  91                         Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
  92                         imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer
  93                         lorem nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean
  94                         id mi in massa bibendum suscipit. Integer eros. Nullam suscipit
  95                         mauris. In pellentesque. Mauris ipsum est, pharetra semper,
  96                         pharetra in, viverra quis, tellus. Etiam purus. Quisque egestas,
  97                         tortor ac cursus lacinia, felis leo adipiscing nisi, et rhoncus
  98                         elit dolor eget eros. Fusce ut quam. Suspendisse eleifend leo vitae
  99                         ligula. Nulla facilisi. Nulla rutrum, erat vitae lacinia dictum,
 100                         pede purus imperdiet lacus, ut semper velit ante id metus. Praesent
 101                         massa dolor, porttitor sed, pulvinar in, consequat ut, leo. Nullam
 102                         nec est. Aenean id risus blandit tortor pharetra congue.
 103                         Suspendisse pulvinar.
 104                         </p>
 105                 </div>
 106         </body>
 107 </html>