jQuery UI examples - Conversion Class (Switch Class)
When the animation style changes within the set of matched elements to add and remove each element of the specified Class.
For more information about .switchClass() details of the methods, see the API documentation .switchClass () .
.switchClass () Demo
Click the button to preview effects.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI Effects - .switchClass () 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;}
.newClass {width: 240px; padding: 1em; letter-spacing: 0; font-size: 1.2em; margin: 0;}
.anotherNewClass {text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em;}
</ Style>
<Script>
$ (Function () {
$ ( "#button") .click (Function () {
$ ( ".newClass") .switchClass ( "NewClass", "anotherNewClass", 1000);
$ ( ".anotherNewClass") .switchClass ( "AnotherNewClass", "newClass", 1000);
return false;
});
});
</ 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>