jQuery UI Effects - removeClass Demo : UI Effects « jQuery « JavaScript Tutorial

Home
JavaScript Tutorial
1.Language Basics
2.Operators
3.Statement
4.Development
5.Number Data Type
6.String
7.Function
8.Global
9.Math
10.Form
11.Array
12.Date
13.Dialogs
14.Document
15.Event
16.Location
17.Navigator
18.Screen
19.Window
20.History
21.HTML Tags
22.Style
23.DOM Node
24.Drag Drop
25.Object Oriented
26.Regular Expressions
27.XML
28.GUI Components
29.Dojo toolkit
30.jQuery
31.Animation
32.MS JScript
JavaScript Tutorial » jQuery » UI Effects 
30.144.18.jQuery UI Effects - removeClass Demo
<!--
  jQuery UI Effects Blind 1.7.2
 
  Copyright (c2009 AUTHORS.txt (http://jqueryui.com/about)
  Dual licensed under the MIT (MIT-LICENSE.txt)
  and GPL (GPL-LICENSE.txtlicenses.
 
 
-->
<!doctype html>
<html lang="en">
<head>
  <title>jQuery UI Effects - removeClass Demo</title>
  <link type="text/css" href="js/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/effects.core.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <style type="text/css">
    .toggler width: 500px; height: 200px; position: relative;}
    #button padding: .5em 1em; text-decoration: none; }
    #effect {position: relative;  width: 240px;  padding: 1em;  letter-spacing: 0; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333}
    #effect.newClass text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; }
  </style>
  <script type="text/javascript">
  $(function() {
    $("#button").click(function() {
      $('#effect').removeClass('newClass', 1000, callback);
      return false;
    });
    
    function callback(){
      setTimeout(function(){
        $('#effect').addClass('newClass');
      }1500);
    }
  });
  </script>
</head>
<body>

<div class="demo">

<div class="toggler">
  <div id="effect" class="newClass ui-corner-all">
      Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. 
  </div>
</div>

<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>

</div><!-- End demo -->

<div class="demo-description">

<p>Click the button above to preview the effect.</p>

</div><!-- End demo-description -->

</body>
</html>
30.144.UI Effects
30.144.1.jQuery UI Effects: Blind
30.144.2.jQuery UI Effects: Bounce
30.144.3.jQuery UI Effects: Clip
30.144.4.jQuery UI Effects: Drop
30.144.5.jQuery UI Effects: Explode
30.144.6.jQuery UI Effects: Fold
30.144.7.jQuery UI Effects: Highlight
30.144.8.jQuery UI Effects: Puff
30.144.9.jQuery UI Effects: Pulsate
30.144.10.jQuery UI Effects: Scale
30.144.11.jQuery UI Effects: Shake
30.144.12.jQuery UI Effects: Size
30.144.13.jQuery UI Effects: Slide
30.144.14.jQuery UI Effects: Transfer
30.144.15.jQuery UI Effects - Hide Demo
30.144.16.jQuery UI Effects - switchClass Demo
30.144.17.jQuery UI Effects - Toggle Demo
30.144.18.jQuery UI Effects - removeClass Demo
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.