jQuery UI & Effects: Add Class

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

jQuery UI Effects – addClass demo

This demo adds a class which animates: text-indent, letter-spacing, width, height, padding, margin, and font-size.

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

            function callback() {
                setTimeout(function () {
                }, 1500);

<div class='toggler'>
    <div id='effect' class='ui-corner-all'>
        I am getting bigger and bigger and please do not stop me.

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

Try The Code

In the line

$('#effect').addClass('newClass', 1000, callback);

A new class newClass will be added to the div in a duration of 1000ms.

Once the animation is completed, the callback function will be called removing the newly added class.  The newClass will be removed in 1500ms as in this line below.

Series Navigation
jQuery UI & Effects: Toggle class >>

Leave a comment

Leave a Reply