Mercurial > hg > STI-GWT
comparison war/scripts/jQuery/demos/addClass/default.html @ 3:cf06b77a8bbd
Committed branch of the e4D repos sti-gwt branch 16384.
git-svn-id: http://dev.dariah.eu/svn/repos/eu.dariah.de/ap1/sti-gwt-dariah-geobrowser@36 f2b5be40-def6-11e0-8a09-b3c1cc336c6b
author | StefanFunk <StefanFunk@f2b5be40-def6-11e0-8a09-b3c1cc336c6b> |
---|---|
date | Tue, 17 Jul 2012 13:34:40 +0000 |
parents | |
children |
comparison
equal
deleted
inserted
replaced
2:2897af43ccc6 | 3:cf06b77a8bbd |
---|---|
1 <!DOCTYPE html> | |
2 <html lang="en"> | |
3 <head> | |
4 <meta charset="utf-8"> | |
5 <title>jQuery UI Effects - addClass demo</title> | |
6 <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> | |
7 <script src="../../jquery-1.5.1.js"></script> | |
8 <script src="../../ui/jquery.effects.core.js"></script> | |
9 <link rel="stylesheet" href="../demos.css"> | |
10 <style> | |
11 .toggler { width: 500px; height: 200px; position: relative; } | |
12 #button { padding: .5em 1em; text-decoration: none; } | |
13 #effect { width: 240px; padding: 1em; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; } | |
14 .newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; } | |
15 </style> | |
16 <script> | |
17 $(function() { | |
18 $( "#button" ).click(function() { | |
19 $( "#effect" ).addClass( "newClass", 1000, callback ); | |
20 return false; | |
21 }); | |
22 | |
23 function callback() { | |
24 setTimeout(function() { | |
25 $( "#effect" ).removeClass( "newClass" ); | |
26 }, 1500 ); | |
27 } | |
28 }); | |
29 </script> | |
30 </head> | |
31 <body> | |
32 | |
33 <div class="demo"> | |
34 | |
35 <div class="toggler"> | |
36 <div id="effect" class=" ui-corner-all"> | |
37 Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. | |
38 </div> | |
39 </div> | |
40 | |
41 <a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a> | |
42 | |
43 </div><!-- End demo --> | |
44 | |
45 | |
46 | |
47 <div class="demo-description"> | |
48 <p>This demo adds a class which animates: text-indent, letter-spacing, width, height, padding, margin, and font-size.</p> | |
49 </div><!-- End demo-description --> | |
50 | |
51 </body> | |
52 </html> |