How To Define Relative Values With Animate Method In JQuery

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

In Jquery it is also possible to define relative values (the value is then relative to the element's current value). This is done by putting += or -= in front of the value .So today we discuss how to define relative values

How To Define Relative 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 relative values.

<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("p").animate({
                left: '250px',
                height: '+=150px',
                width: '+=150px'
            });
        });
    });
</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!

Complete Code For Defining Relative Values With Animate Method In JQuery

<!DOCTYPE html>
<html>
<head>
    <title>How To Define Relative 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;
    }
</style>
<body>
<div class="container">
    <br><br><br>
    <div class="text-center">
        <h2 id="color" style="color: White">Define Relative Values With Animate Method In JQuery </h2>
    </div>
    <br>
    <br>

    <button class="btn-success">Start Animation</button>
    <br><br><br>

    <p style="background:#98bf21;height:100px;width:100px;position:absolute;"></p>

</div>
</body>
</html>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("p").animate({
                left: '250px',
                height: '+=150px',
                width: '+=150px'
            });
        });
    });
</script>