How To Pre Define Values With Animate Method In JQuery

Posted By Bajarangi soft , Posted On 13-10-2020

In Jquery we can even specify a property's animation value as "show", "hide", or "toggle". So Today we discuss how to do it

How To Pre Define Values With Animate Method In JQuery

Step 1:Create index.html file and implement below code.

<button class="btn-success">Start Animation</button>
<br><br><br>
<p style="background:#98bf21;height:100px;width:100px;position:absolute;"></p>

Step 2:Implement jquery to Use Animate method with pre-define values.

<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("p").animate({
                height: 'toggle'
            });
        });
    });
</script>

By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!
In above example when you click the button multiple times to toggle the animation.

Complete Code For Pre Defined Values With Animate Method In JQuery

<!DOCTYPE html>
<html>
<head>
    <title>How To Pre Define Values With Animate Method In JQuery </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<style>
    body {
        background: darkolivegreen;
    }
    .well{
        height:210px;

    }
</style>
<body>
<div class="container">
    <br><br><br>
    <div class="text-center">
        <h2 id="color" style="color: White">Pre Defined Values With Animate Method In JQuery </h2>
    </div>
    <br>
    <br>

    <div class="well">
        <button class="btn-success">Start Animation</button>
        <br><br><br>
        <p style="background:#98bf21;height:100px;width:100px;position:absolute;"></p>
    </div>

</div>
</body>
</html>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("p").animate({
                height: 'toggle'
            });
        });
    });
</script>