JQuery UI Effects Animation Tutorial | JQuery Effects Animation Example

jQuery · 11-Apr-2023

Hi Dev,

In this blog,I will descuss with you animation effect to the elements in jquery ui. effect() method applies an animation effect to the elements without having to show or hide it.

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 Animate 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 { 
            width: 240px; 
            height: 170px; 
            padding: 0.4em; 
            position: relative; 
            background: #fff; 
        }
        #effect h3 { 
            margin: 0; 
            padding: 0.4em; 
            text-align: center; 
        }
        .box-main{
            margin:150px auto;
            padding:20px;
            width:38%;
            border-radius: 5px;
            border:2px solid #000;
        }
    </style>
</head>
<body>

 
<div class="box-main">
    <div class="toggler">
        <div id="effect" class="ui-widget-content ui-corner-all">
            <h3 class="ui-widget-header ui-corner-all">Animate Box</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
    <button id="button" class="ui-state-default ui-corner-all">Click Me Toggle Effect</button>
</div>
<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>
<script>
    $( function() {
        var state = true;
            $("#button" ).on( "click", function() {
            if(state){
                $( "#effect" ).animate({
                    backgroundColor: "#000",
                    color: "#fff",
                    width: 500
            },1000);
            }else{
            $( "#effect" ).animate({
                backgroundColor: "#fff",
                color: "#000",
                width: 240
                },1000);
            }
            state = !state;
        });
    });
</script>
</body>
</html>

It will help you...