|
1 | 1 | <!DOCTYPE html> |
2 | 2 | <html lang="en"> |
3 | 3 | <head> |
4 | | - <meta charset="UTF-8" /> |
| 4 | + <meta charset="utf-8"> |
5 | 5 | <title>jQuery UI Effects - switchClass Demo</title> |
6 | | - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> |
7 | | - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> |
8 | | - <script type="text/javascript" src="../../ui/jquery.effects.core.js"></script> |
9 | | - <link type="text/css" href="../demos.css" rel="stylesheet" /> |
10 | | - <style type="text/css"> |
11 | | - .toggler { width: 500px; height: 200px; position: relative;} |
12 | | - #button { padding: .5em 1em; text-decoration: none; } |
13 | | - #effect {position: relative; } |
14 | | - .newClass { width: 240px; padding: 1em; letter-spacing: 0; font-size: 1.2em; margin: 0; } |
15 | | - .anotherNewClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; } |
| 6 | + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> |
| 7 | + <script src="../../jquery-1.4.2.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 {position: relative; } |
| 14 | + .newClass { width: 240px; padding: 1em; letter-spacing: 0; font-size: 1.2em; margin: 0; } |
| 15 | + .anotherNewClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; } |
16 | 16 | </style> |
17 | | - <script type="text/javascript"> |
| 17 | + <script> |
18 | 18 | $(function() { |
19 | | - $("#button").click(function(){ |
20 | | - $(".newClass").switchClass('newClass', 'anotherNewClass', 1000); |
21 | | - $(".anotherNewClass").switchClass('anotherNewClass', 'newClass', 1000); |
| 19 | + $( "#button" ).click(function(){ |
| 20 | + $( ".newClass" ).switchClass( "newClass", "anotherNewClass", 1000 ); |
| 21 | + $( ".anotherNewClass" ).switchClass( "anotherNewClass", "newClass", 1000 ); |
22 | 22 | return false; |
23 | 23 | }); |
24 | 24 | }); |
|
28 | 28 |
|
29 | 29 | <div class="demo"> |
30 | 30 |
|
31 | | - |
32 | 31 | <div class="toggler"> |
33 | 32 | <div id="effect" class="newClass ui-corner-all"> |
34 | 33 | Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. |
|
38 | 37 |
|
39 | 38 | </div><!-- End demo --> |
40 | 39 |
|
41 | | -<div class="demo-description"> |
42 | 40 |
|
43 | | -<p>Click the button above to preview the effect.</p> |
44 | 41 |
|
| 42 | +<div class="demo-description"> |
| 43 | +<p>Click the button above to preview the effect.</p> |
45 | 44 | </div><!-- End demo-description --> |
46 | 45 |
|
47 | 46 | </body> |
|
0 commit comments