|
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 - toggleClass 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; width: 240px; padding: 1em; letter-spacing: 0; 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; } |
| 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; width: 240px; padding: 1em; letter-spacing: 0; 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 | 15 | </style>
|
16 |
| - <script type="text/javascript"> |
| 16 | + <script> |
17 | 17 | $(function() {
|
18 |
| - $("#button").click(function() { |
19 |
| - $('#effect').toggleClass('newClass', 1000); |
| 18 | + $( "#button" ).click(function() { |
| 19 | + $( "#effect" ).toggleClass( "newClass", 1000 ); |
20 | 20 | return false;
|
21 | 21 | });
|
22 | 22 | });
|
|
36 | 36 |
|
37 | 37 | </div><!-- End demo -->
|
38 | 38 |
|
39 |
| -<div class="demo-description"> |
40 | 39 |
|
41 |
| -<p>Click the button above to preview the effect.</p> |
42 | 40 |
|
| 41 | +<div class="demo-description"> |
| 42 | +<p>Click the button above to preview the effect.</p> |
43 | 43 | </div><!-- End demo-description -->
|
44 | 44 |
|
45 | 45 | </body>
|
|
0 commit comments