In this tutorial, we will learn JQuery UI Switchclass 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 - switchClass Example</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<style>
    .toggler { 
        width: 400px;
        height: 200px;
        position: relative;
        border:1px solid #000;
        margin-bottom:20px;
    }
    #button { 
        padding: .5em 1em;
        text-decoration: none;
    }
    #effect { 
        position: relative; 
    }
    .newClass { 
        width: 220px;
        padding: 1em;
        letter-spacing: 0;
        margin: 0; 
        }
    .anotherNewClass { 
        text-indent: 40px;
        letter-spacing: .2em;
        width: 350px;
        height: 100px;
        padding: 30px;
        margin: 10px;
        font-size: 1.1em; 
    }
    .main-section{
        margin:40px auto;
        border:1px solid #000;
        width:30%;
        padding:20px;
    }
    h2{
        text-align: center;
    }
    body{
        background-color: #f2a965;
    }
    </style>
<body>
    <h2>JQuery UI Switch Class Example - rathorji.in</h2>
    <div class="main-section">
        <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>
        <button id="button" class="ui-state-default ui-corner-all">Click Me Run Effect</button>
    </div>

    <script>
        $( function() {
            $( "#button" ).on( "click", function() {
            $( ".newClass" ).switchClass( "newClass", "anotherNewClass", 900 );
            $( ".anotherNewClass" ).switchClass( "anotherNewClass", "newClass", 900 );
            });
        });
    </script> 
</body>
</html>

May this example help you.