aboutsummaryrefslogtreecommitdiff
path: root/static/development-bundle/demos/removeClass/default.html
diff options
context:
space:
mode:
Diffstat (limited to 'static/development-bundle/demos/removeClass/default.html')
-rw-r--r--static/development-bundle/demos/removeClass/default.html51
1 files changed, 51 insertions, 0 deletions
diff --git a/static/development-bundle/demos/removeClass/default.html b/static/development-bundle/demos/removeClass/default.html
new file mode 100644
index 0000000..83a8b89
--- /dev/null
+++ b/static/development-bundle/demos/removeClass/default.html
@@ -0,0 +1,51 @@
1<!doctype html>
2<html lang="en">
3<head>
4 <title>jQuery UI Effects - removeClass Demo</title>
5 <link type="text/css" href="http://jquery-ui.googlecode.com/svn/trunk/themes/base/ui.all.css" rel="stylesheet" />
6 <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/jquery-1.3.2.js"></script>
7 <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/ui/effects.core.js"></script>
8 <link type="text/css" href="http://jquery-ui.googlecode.com/svn/trunk/demos/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 {position: relative; width: 240px; padding: 1em; letter-spacing: 0; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; }
13 #effect.newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; }
14 </style>
15 <script type="text/javascript">
16 $(function() {
17 $("#button").click(function() {
18 $('#effect').removeClass('newClass', 1000, callback);
19 return false;
20 });
21
22 function callback(){
23 setTimeout(function(){
24 $('#effect').addClass('newClass');
25 }, 1500);
26 }
27 });
28 </script>
29</head>
30<body>
31
32<div class="demo">
33
34<div class="toggler">
35 <div id="effect" class="newClass ui-corner-all">
36 Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.
37 </div>
38</div>
39
40<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
41
42</div><!-- End demo -->
43
44<div class="demo-description">
45
46<p>Click the button above to preview the effect.</p>
47
48</div><!-- End demo-description -->
49
50</body>
51</html>
© 2015 Mike Crute