jQuery UI & Effects: Switch class

This entry is part 6 of 10 in the series jQuery UI Effects

jQuery UI Effects – switchClass Demo

Add and remove class(es) to elements while animating with changes in style.

<!doctype html>
<html lang='en'>
    <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://codecrawl.com/code/jqueryui/jqueryui_style.css'>
        .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;
        $(function () {
            $('#button').click(function () {
                $('.newClass').switchClass('newClass', 'anotherNewClass', 1000);
                $('.anotherNewClass').switchClass('anotherNewClass', 'newClass', 1000);
                return false;

<div class='toggler'>
    <div id='effect' class='newClass ui-corner-all'>
        Sorry that I have confused you.  I am switching in and out of a class.
<a href='#' id='button' class='ui-state-default ui-corner-all'>Run Effect</a>

Try The Code

Series Navigation<< jQuery UI & Effects: Animation Effects
jQuery UI & Effects: Easing Effects >>

Leave a comment

Leave a Reply