In this tutorial, we will learn JQuery UI removeClass Effects Animation


Example

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Effects - removeClass Example</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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; 
        }
        .main-section{
            margin:25px auto;
            padding:30px 60px;
            width:22.3%;
            border:2px solid #000;
        }
    </style>
</head>
<body style="background-color:#9c601680;">
    <h2 style="text-align: center;">JQuery Ui removeClass Example - rathorji.in</h2>
    <div class="main-section">
        <div class="toggler">
            <div id="effect" class="newClass ui-corner-all">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            </div>
        </div>
        <button id="button" class="ui-state-default ui-corner-all">Click Me Run Effect</button>
    </div> 
    <script>
        $( function() {
            $("#button").on("click", function() {
            $("#effect").removeClass("newClass", 1000, callback);
        });

        function callback() {
                setTimeout(function() {
                    $("#effect").addClass("newClass");
                }, 1500);
            }
        });
    </script>
</body>
</html>


May this help you.