| 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
|---|
| 2 | "http://www.w3.org/TR/html4/strict.dtd"> |
|---|
| 3 | |
|---|
| 4 | <html> |
|---|
| 5 | <head> |
|---|
| 6 | <title>lfx</title> |
|---|
| 7 | |
|---|
| 8 | <style> |
|---|
| 9 | body { |
|---|
| 10 | background-color: #DEDEDE; |
|---|
| 11 | } |
|---|
| 12 | |
|---|
| 13 | .box { |
|---|
| 14 | font-family: Trebuchet MS, Trebuchet, Bitstream Vera Sans, Verdana, sans-serif; |
|---|
| 15 | font-size: 12px; |
|---|
| 16 | line-height: 17px; |
|---|
| 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 | -moz-border-radius: 12px; |
|---|
| 27 | -webkit-border-radius: 10px; |
|---|
| 28 | /* -opera-border-radius: 10px; */ |
|---|
| 29 | border-radius: 10px; |
|---|
| 30 | -moz-box-sizing: border-box; |
|---|
| 31 | -opera-sizing: border-box; |
|---|
| 32 | -webkit-box-sizing: border-box; |
|---|
| 33 | -khtml-box-sizing: border-box; |
|---|
| 34 | box-sizing: border-box; |
|---|
| 35 | /* position: absolute; */ |
|---|
| 36 | } |
|---|
| 37 | </style> |
|---|
| 38 | <script type="text/javascript"> |
|---|
| 39 | var djConfig = { |
|---|
| 40 | isDebug: true |
|---|
| 41 | |
|---|
| 42 | }; |
|---|
| 43 | </script> |
|---|
| 44 | <script type="text/javascript" src="../../dojo.js"></script> |
|---|
| 45 | <script type="text/javascript"> |
|---|
| 46 | dojo.require("dojo.lfx.*"); |
|---|
| 47 | dojo.require("dojo.lfx.extras"); |
|---|
| 48 | dojo.require("dojo.event.*"); |
|---|
| 49 | |
|---|
| 50 | </script> |
|---|
| 51 | <script type="text/javascript"> |
|---|
| 52 | dojo.addOnLoad(function(){ |
|---|
| 53 | with(dojo.lfx){ |
|---|
| 54 | chain( |
|---|
| 55 | wipeOut("foo", 500), |
|---|
| 56 | wipeIn("foo", 500), |
|---|
| 57 | fadeWipeOut("bar", 500), |
|---|
| 58 | fadeWipeIn("bar", 500) |
|---|
| 59 | ).play(1000); |
|---|
| 60 | } |
|---|
| 61 | }); |
|---|
| 62 | </script> |
|---|
| 63 | </head> |
|---|
| 64 | <body> |
|---|
| 65 | <div id="foo" class="box" style="float: left;"> |
|---|
| 66 | <p> |
|---|
| 67 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean |
|---|
| 68 | semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. |
|---|
| 69 | Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla |
|---|
| 70 | facilisi. Maecenas luctus venenatis nulla. In sit amet dui non mi |
|---|
| 71 | semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum |
|---|
| 72 | magna. Sed vitae risus. |
|---|
| 73 | </p> |
|---|
| 74 | <p> |
|---|
| 75 | Aliquam vitae enim. Duis scelerisque metus auctor est venenatis |
|---|
| 76 | imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer |
|---|
| 77 | lorem nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean |
|---|
| 78 | id mi in massa bibendum suscipit. Integer eros. Nullam suscipit |
|---|
| 79 | mauris. In pellentesque. Mauris ipsum est, pharetra semper, |
|---|
| 80 | pharetra in, viverra quis, tellus. Etiam purus. Quisque egestas, |
|---|
| 81 | tortor ac cursus lacinia, felis leo adipiscing nisi, et rhoncus |
|---|
| 82 | elit dolor eget eros. Fusce ut quam. Suspendisse eleifend leo vitae |
|---|
| 83 | ligula. Nulla facilisi. Nulla rutrum, erat vitae lacinia dictum, |
|---|
| 84 | pede purus imperdiet lacus, ut semper velit ante id metus. Praesent |
|---|
| 85 | massa dolor, porttitor sed, pulvinar in, consequat ut, leo. Nullam |
|---|
| 86 | nec est. Aenean id risus blandit tortor pharetra congue. |
|---|
| 87 | Suspendisse pulvinar. |
|---|
| 88 | </p> |
|---|
| 89 | </div> |
|---|
| 90 | <div id="bar" class="box" style="float: left;"> |
|---|
| 91 | <p> |
|---|
| 92 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean |
|---|
| 93 | semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. |
|---|
| 94 | Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla |
|---|
| 95 | facilisi. Maecenas luctus venenatis nulla. In sit amet dui non mi |
|---|
| 96 | semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum |
|---|
| 97 | magna. Sed vitae risus. |
|---|
| 98 | </p> |
|---|
| 99 | <p> |
|---|
| 100 | Aliquam vitae enim. Duis scelerisque metus auctor est venenatis |
|---|
| 101 | imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer |
|---|
| 102 | lorem nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean |
|---|
| 103 | id mi in massa bibendum suscipit. Integer eros. Nullam suscipit |
|---|
| 104 | mauris. In pellentesque. Mauris ipsum est, pharetra semper, |
|---|
| 105 | pharetra in, viverra quis, tellus. Etiam purus. Quisque egestas, |
|---|
| 106 | tortor ac cursus lacinia, felis leo adipiscing nisi, et rhoncus |
|---|
| 107 | elit dolor eget eros. Fusce ut quam. Suspendisse eleifend leo vitae |
|---|
| 108 | ligula. Nulla facilisi. Nulla rutrum, erat vitae lacinia dictum, |
|---|
| 109 | pede purus imperdiet lacus, ut semper velit ante id metus. Praesent |
|---|
| 110 | massa dolor, porttitor sed, pulvinar in, consequat ut, leo. Nullam |
|---|
| 111 | nec est. Aenean id risus blandit tortor pharetra congue. |
|---|
| 112 | Suspendisse pulvinar. |
|---|
| 113 | </p> |
|---|
| 114 | </div> |
|---|
| 115 | </body> |
|---|
| 116 | </html> |
|---|
