Open In App

How to animates first div left property and synchronizes the remaining divs ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn how to animate a division element’s left property in sync with the other division elements. This can be used in situations where multiple division elements have to be repositioned or animated using only one property.

Approach: We will be using the jQuery click(), animate(), gt() and css() methods. Each element will that has to be animated will have a class of “gfg-animate”. 

A button with a class of “animation-btn” is defined which on click will trigger the animate() method applied to the first division element. The animate() method consists of two parameters. The first parameter contains the styling of the left property which is modified to a new value. The second parameter sets the speed of the parameter using the duration property defined within this parameter. 

Next, the step function is used to animate the left property of all the division elements with respect to the left property of the first division element. The left property of the division elements is modified using the css() method within the step function. All the division elements are selected using the gt() method with the index being specified as 0.

Note: Remember to set the position as relative of all the division elements since each one has to be synchronized with respect to the first division element.

Example: In this example, all the division elements are animated for a duration of three seconds in accordance with the first division element’s left property which is 250.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script src=
    </script>
  
    <!-- Basic inline styling -->
    <style>
        body {
            text-align: center;
        }
  
        h1 {
            color: green;
            font-size: 40px;
        }
  
        /* Necessary for animation to work */
        .gfg-animate {
            position: relative;
            display: inline-block;
            background-color: green;
            width: 45px;
            height: 45px;
            margin-right: 0.5rem;
        }
  
        button {
            cursor: pointer;
            margin: 0 auto;
            display: block;
            margin-top: 2rem;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <div class="gfg-animate"></div>
    <div class="gfg-animate"></div>
    <div class="gfg-animate"></div>
    <div class="gfg-animate"></div>
    <button class="animation-btn">
        Click to execute animation
    </button>
    <script type="text/javascript">
        $(".animation-btn").click(function () {
  
            // Get the first division element
            // and animate it
            $(".gfg-animate:first").animate(
                {
                    left: 250,
                },
                {
                    duration: 3000,
                    step: function (param) {
                        
                        $(".gfg-animate:gt(0)")
                            .css("left", param);
                    },
                }
            );
        });
    </script>
</body>
  
</html>


Output:



Last Updated : 17 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads