diff options
Diffstat (limited to 'static/development-bundle/demos/animate/default.html')
-rw-r--r-- | static/development-bundle/demos/animate/default.html | 52 |
1 files changed, 52 insertions, 0 deletions
diff --git a/static/development-bundle/demos/animate/default.html b/static/development-bundle/demos/animate/default.html new file mode 100644 index 0000000..a01f08a --- /dev/null +++ b/static/development-bundle/demos/animate/default.html | |||
@@ -0,0 +1,52 @@ | |||
1 | <!doctype html> | ||
2 | <html lang="en"> | ||
3 | <head> | ||
4 | <title>jQuery UI Effects - Animate Demo</title> | ||
5 | <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> | ||
6 | <script type="text/javascript" src="../../jquery-1.3.2.js"></script> | ||
7 | <script type="text/javascript" src="../../ui/effects.core.js"></script> | ||
8 | <link type="text/css" href="../demos.css" rel="stylesheet" /> | ||
9 | <style type="text/css"> | ||
10 | .toggler { width: 500px; height: 200px; position: relative;} | ||
11 | #button { padding: .5em 1em; text-decoration: none; } | ||
12 | #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; background: #fff; } | ||
13 | #effect h3 { margin: 0; padding: 0.4em; text-align: center; } | ||
14 | </style> | ||
15 | <script type="text/javascript"> | ||
16 | $(function() { | ||
17 | $("#button").toggle( | ||
18 | function() { | ||
19 | $("#effect").animate({backgroundColor: '#aa0000', color: '#fff', width: 500}, 1000); | ||
20 | }, | ||
21 | function() { | ||
22 | $("#effect").animate({backgroundColor: '#fff', color: '#000', width: 240}, 1000); | ||
23 | } | ||
24 | ); | ||
25 | }); | ||
26 | </script> | ||
27 | </head> | ||
28 | <body> | ||
29 | |||
30 | <div class="demo"> | ||
31 | |||
32 | <div class="toggler"> | ||
33 | <div id="effect" class="ui-widget-content ui-corner-all"> | ||
34 | <h3 class="ui-widget-header ui-corner-all">Animate</h3> | ||
35 | <p> | ||
36 | Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi. | ||
37 | </p> | ||
38 | </div> | ||
39 | </div> | ||
40 | |||
41 | <a href="#" id="button" class="ui-state-default ui-corner-all">Toggle Effect</a> | ||
42 | |||
43 | </div><!-- End demo --> | ||
44 | |||
45 | <div class="demo-description"> | ||
46 | |||
47 | <p>Click the button above to preview the effect.</p> | ||
48 | |||
49 | </div><!-- End demo-description --> | ||
50 | |||
51 | </body> | ||
52 | </html> | ||