jQuery UI & Effects: Remove Class

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

jQuery UI Effects – removeClass Demo

Removes class(es) from elements while animating all style changes.

<!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='https://codecrawl.com/code/jqueryui/jqueryui_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'>
        You can not be incredible hulk all the time.
    </div>
</div>

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

</body>
</html>
Try The Code

jQuery: removeClass

This entry is part 15 of 33 in the series jQuery Tutorial

Imagine we have some paragraphs with a few classes applied to them.

Let’s try to remove a class from them.

<!doctype html>
<html>
<head>
    <title>removeClass demo</title>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <style>
        p {
            margin: 4px;
            font-size: 16px;
            font-weight: bolder;
        }
        .blue {
            color: blue;
        }
        .under {
            text-decoration: underline;
        }
        .highlight {
            background: yellow;
        }
    </style>
</head>
<body>

<p class='blue under'>Hello</p>
<p class='blue under highlight'>and</p>
<p class='blue under'>then</p>
<p class='blue under'>Goodbye</p>

<script>
    $('p:even').removeClass('blue');
</script>

</body>
</html>

Try The Code

The p:even here will select the even number of <p> elements which are line 0 and 2 since there are 4 paragraphs here.