jQuery UI examples - Add Class (Add Class)
When the animation style changed for each element of the set of matched elements within Adds the specified Class.
For more information about .addClass() details of the methods, see the API documentation .addClass () .
.addClass () Demo
Click the button to preview effects.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI Effects - .addClass () 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 {width: 240px; padding: 1em; 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") .addClass ( "NewClass", 1000, callback);
return false;
});
function callback () {
setTimeout (function () {
$ ( "#effect") .removeClass ( "NewClass");
}, 1500);
}
});
</ Script>
</ Head>
<Body>
<Div class = "toggler">
<Div id = "effect" class = "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>