How to use Animate Effects in JQuery?

jQuery · 04-May-2022

Hi friends,

This example is focused on How to carry out the animation effect in JQuery. This article will give you simple example of How to perform the Animate effect in JQuery. I would like to share with you How to execute the animation effect in JQuery. This article will give you simple example of How To Use Animate Effect in JQuery. So, let's follow few step to create example of How TO Run Animate Effect In JQuery.

I will give you a simple example of how to use animate effects in jquery editor.

So let's see bellow example:

Example

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>How to use Animate Effects in JQuery?</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-12 col-mg-12 col-sm-12 col-12 bg-dark text-white p-5 mt-5">
                <h1>How to use Animate Effects in JQuery? - Nicesnippets.com</h1>
            </div>
            <div class="text-center mt-5">
                <p class="text-info fw-bold">Click The Button And Text Animate</p>
                <button type="button" class="btn btn-secondary m-5 btn1">Animate</button>
                <button type="button" class="btn btn-secondary btn2">Reset</button>
            </div>
        </div>
    </div>
        <script>
            $(document).ready(function(){
                $(".btn1").click(function(){
                    $("p").animate({fontSize: "3em"});
                });
                $(".btn2").click(function(){
                    $("p").animate({fontSize: "1em"});
                });
            });
        </script>
</body>
</html>

Output:

I hope it will help you...