Latest web development tutorials

jQuery UI example - Remove Class (Remove Class)

When the animation style changed for each element of the set of matched elements removed within the specified Class.

For more information about .removeClass() details of the methods, see the API documentation .removeClass () .

.removeClass () Demo

Click the button to preview effects.

<! Doctype html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI Effects - .removeClass () Demo </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  .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;}
  .newClass {text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#button") .click (Function () {
      $ ( "#effect") .removeClass ( "NewClass", 1000, callback);
      return false;
    });
 
    function callback () {
      setTimeout (function () {
        $ ( "#effect") .addClass ( "NewClass");
      }, 1500);
    }
  });
  </ Script>
</ Head>
<Body>
 
<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 effects </a>
 
 
</ Body>
</ Html>