Manipulate Multiple Property With Animate Method In JQuery

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

In JQuery Notice that multiple properties can be animated at the same time So discuss how to manipulate multiple property with animate

Manipulate Multiple Property 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.

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


Is it possible to manipulate ALL CSS properties with the animate() method

Yes, almost! However, there is one important thing to remember: all property names must be camel-cased when used with the animate() method: You will need to write paddingLeft instead of padding-left, marginRight instead of margin-right, and so on.

Complete Code For Manipulating Multiple Property With Animate Method In JQuery

<!DOCTYPE html>
<html>
<head>
    <title>Manipulate Multiple Property 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">Manipulate Multiple Property 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',
                opacity: '0.5',
                height: '150px',
                width: '150px'
            });
        });
    });
</script>

Related Post