JQuery UI Switchclass Effects Animation Tutorial

jQuery · 11-Apr-2023

Hi Guys,

In this example,I will learn you how to use switch class effects animation in jquery ui.you can easy use switch class efffects in jquery ui.

switch class method is one CSS class to another along with managing transition from one state to another in a smooth manner.

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 - Nicesnippets.com</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>

It will help you...