jQuery Animation

The jQuery animate() method is used to create custom animation for Html element.

Syntax:

$(selector).animate({params}, speed, callback);  

Example of Code

<style>
.example-jquery-animation-multiple-queued-div{
        width: 50px;
        height: 50px;
        background: red;
        margin-top: 30px;
        border-style: solid; /* Required to animate border width */
        border-color: #6f40ce;
    }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".example-jquery-animation-multiple-queued-button").click(function(){
        $(".example-jquery-animation-multiple-queued-div")
            .animate({width: "200px"})
            .animate({height: "200px"})
            .animate({marginLeft: "100px"})
            .animate({borderWidth: "10px"})
            .animate({opacity: 0.5});
    });
});
</script>
<button type="button" class="example-jquery-animation-multiple-queued-button">Start Animation</button>
<div class="example-jquery-animation-multiple-queued-div"></div>