| 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: 5px; |
|---|
| 24 | margin-left: 10px; |
|---|
| 25 | -moz-border-radius: 12px; |
|---|
| 26 | -webkit-border-radius: 10px; |
|---|
| 27 | /* -opera-border-radius: 10px; */ |
|---|
| 28 | border-radius: 10px; |
|---|
| 29 | -moz-box-sizing: border-box; |
|---|
| 30 | -opera-sizing: border-box; |
|---|
| 31 | -webkit-box-sizing: border-box; |
|---|
| 32 | -khtml-box-sizing: border-box; |
|---|
| 33 | box-sizing: border-box; |
|---|
| 34 | } |
|---|
| 35 | </style> |
|---|
| 36 | <script type="text/javascript"> |
|---|
| 37 | var djConfig = { isDebug: true }; |
|---|
| 38 | </script> |
|---|
| 39 | <script type="text/javascript" src="../../dojo.js"></script> |
|---|
| 40 | <script type="text/javascript"> |
|---|
| 41 | dojo.require("dojo.lfx.*"); |
|---|
| 42 | dojo.require("dojo.lfx.extras"); |
|---|
| 43 | </script> |
|---|
| 44 | <script type="text/javascript"> |
|---|
| 45 | dojo.addOnLoad(function(){ |
|---|
| 46 | dojo.lfx.combine( |
|---|
| 47 | dojo.lfx.scale("foo", 0, true, false, 500).connect("beforeBegin", |
|---|
| 48 | function(){ |
|---|
| 49 | dojo.byId("foo").style.overflow = "hidden"; |
|---|
| 50 | } |
|---|
| 51 | ), |
|---|
| 52 | dojo.lfx.fadeOut("foo", 800) |
|---|
| 53 | ).play(1000); |
|---|
| 54 | }); |
|---|
| 55 | </script> |
|---|
| 56 | </head> |
|---|
| 57 | <body> |
|---|
| 58 | <div id="foo" class="box" style="float: left;"> |
|---|
| 59 | <p> |
|---|
| 60 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean |
|---|
| 61 | semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. |
|---|
| 62 | Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla |
|---|
| 63 | facilisi. Maecenas luctus venenatis nulla. In sit amet dui non mi |
|---|
| 64 | semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum |
|---|
| 65 | magna. Sed vitae risus. |
|---|
| 66 | </p> |
|---|
| 67 | <p> |
|---|
| 68 | Aliquam vitae enim. Duis scelerisque metus auctor est venenatis |
|---|
| 69 | imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer |
|---|
| 70 | lorem nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean |
|---|
| 71 | id mi in massa bibendum suscipit. Integer eros. Nullam suscipit |
|---|
| 72 | mauris. In pellentesque. Mauris ipsum est, pharetra semper, |
|---|
| 73 | pharetra in, viverra quis, tellus. Etiam purus. Quisque egestas, |
|---|
| 74 | tortor ac cursus lacinia, felis leo adipiscing nisi, et rhoncus |
|---|
| 75 | elit dolor eget eros. Fusce ut quam. Suspendisse eleifend leo vitae |
|---|
| 76 | ligula. Nulla facilisi. Nulla rutrum, erat vitae lacinia dictum, |
|---|
| 77 | pede purus imperdiet lacus, ut semper velit ante id metus. Praesent |
|---|
| 78 | massa dolor, porttitor sed, pulvinar in, consequat ut, leo. Nullam |
|---|
| 79 | nec est. Aenean id risus blandit tortor pharetra congue. |
|---|
| 80 | Suspendisse pulvinar. |
|---|
| 81 | </p> |
|---|
| 82 | </div> |
|---|
| 83 | </body> |
|---|
| 84 | </html> |
|---|
