Open In App

How to animates div’s left property with a relative value using jQuery ?

Last Updated : 09 Mar, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn how to animate a division element’s left property with a relative value using jQuery. This can be used in situations where a division element has to be animated using only one property.

Approach: We will be using the jQuery click() and animate() methods. 

  • The division element which has to be animated has an animate-div class.
  • Two buttons with classes left-arrow and right-arrow respectively are defined which on click will trigger the animate() method applied to the 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 animation using the easing property defined within this parameter.
  • The first button with a class of left-arrow decrements the left property by some value whereas the second button with a class of right-arrow increments the left property by some value. So, the division element moves left on clicking the first button and it moves right on clicking the second button, just by updating the left property.

Note: Remember to set the position as absolute of the division element since the left property can not be used on statically positioned elements.

Example: In this example, the division element is animated by clicking on the two buttons and the division element has an easing property of slow. The first button with a class of left-arrow decrements the left property by 25 pixels whereas the second button with a class of right-arrow increments the left property by 25 pixels.

HTML




<!DOCTYPE html>
<html>
  <head>
    <script src=
    </script>
  
    <!-- Basic inline styling -->
    <style>
      body {
        text-align: center;
      }
  
      h1 {
        color: green;
        font-size: 40px;
      }
  
      p {
        font-weight: bold;
        font-size: 25px;
      }
  
      /* Necessary for animation to work */
      .animate-div {
        position: absolute;
        background-color: green;
        left: 730px;
        width: 75px;
        height: 75px;
        margin-top: 2rem;
      }
  
      button {
        cursor: pointer;
        margin: 0 auto;
      }
    </style>
  </head>
  
  <body>
    <h1>GeeksforGeeks</h1>
    <p>
      jQuery - Animate a div's left 
      property with a relative value
    </p>
  
    <button class="left-arrow"><</button>
    <button class="right-arrow">></button>
    <div class="animate-div"></div>
    <script type="text/javascript">
      $(".left-arrow").click(function () {
        $(".animate-div").animate({ left: "-=25px" }, "slow");
      });
  
      $(".right-arrow").click(function () {
        $(".animate-div").animate({ left: "+=25px" }, "slow");
      });
    </script>
  </body>
</html>


Output:



Similar Reads

How to animates first div left property and synchronizes the remaining divs ?
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 th
2 min read
How to use Relative URL in CSS file and What Location is it Relative to ?
CSS stands for Cascading Style Sheets. It is a style sheet language used for giving a visual appearance to the document in HTML or XML. It is used to define styles such as colors, fonts, layouts, and positioning. It can be applied to specific elements or groups of elements on the webpage. In this article, we will see what location will be relative
4 min read
How to copy the content of a div into another div using jQuery ?
Given an HTML document containing some div element and the task is to copy a div content into another div as its child using jQuery. There are two approaches to solve this problem that are discussed below: Approach 1: First, select the div element which needs to be copied into another div element.Select the target element where the div element is c
2 min read
How to create animations using relative value in jQuery ?
Using jQuery's animate() method, we can add different CSS animations to the elements. This is one of the powerful methods used for manipulating HTML elements and adding animation functionality in jQuery. The animation effect is created as we change the CSS styles in the animate() method. To change the left or right or top or bottom of an element wi
2 min read
How to set position relative to left of a canvas circle using Fabric.js ?
In this article, we are going to see how to position relative to the left of a canvas circle using FabricJS. The canvas means the circle is movable and can be stretched according to requirement. Further, the circle can be customized when it comes to initial stroke color, fill color, stroke width, or radius. Approach: To make it possible, we are goi
2 min read
How to overlay one div over another div using CSS
Creating an overlay effect simply means putting two div together at the same place but both the div appear when needed i.e while hovering or while clicking on one of the div to make the second one appear. Overlays are very clean and give the webpage a tidy look. It looks sophisticated and is simple to design. Overlays can create using two simple CS
2 min read
How to Make a Child Div Element Wider than Parent Div using CSS ?
When the child div element has a fixed width that is wider than the parent div element, it will display overflow outside of the parent element. Because the overflow is hidden by default, one approach is to utilize the overflow attribute to enable it on an element. Another approach includes setting the position property of the parent div element to
2 min read
How to force child div to be 100% of parent div's height without specifying parent's height?
When designing a website, you may want to create a layout where a child div element fills up the height of its parent div element. However, you may not know the exact height of the parent div element and you don't want to specify it. In this article, we will explore different approaches to force a child div element to be 100% of its parent div elem
4 min read
How to center a div within another div?
The div tag is used to construct a division or section of an HTML document in which other elements of HTML is placed and that division/section works like a container whose CSS styling can be done as a single unit or javascript can be used to perform various tasks on that container. Syntax: &lt;div&gt; &lt;h3&gt;'This is a div of the web page.&gt;/h
4 min read
How to center a div on the edge of another div in SASS ?
In this article, we will see how to centre a div on the edge of another div using SASS. SASS is an extension of CSS that stands for Syntactically Awesome Style Sheets. It helps us to create things like variables, nested rules, etc. So that we can reuse the code. Centering a div on the edge of another div is not a difficult task. We can achieve it b
4 min read