如何用jQuery将DIV的左边属性用相对值做成动画

在这篇文章中，我们将学习如何使用jQuery将一个分部元素的左边属性用一个相对值进行动画。这可以用在只用一个属性就能使一个分部元素产生动画的情况下。

方法：我们将使用jQuery的click()和animate()方法。

必须被动画化的分部元素有一个animate-div类.。
我们定义了两个类别为left-arrow和right-arrow的按钮，点击后将触发应用于分部元素的animate()方法。animate()方法由两个参数组成。第一个参数包含左边属性的样式，它被修改为一个新的值。第二个参数使用这个参数中定义的easing属性设置动画的速度。
第一个按钮的类别是left-arrow，它的左属性减少了一些数值，而第二个按钮的类别是right-arrow，它的左属性增加了一些数值。因此，点击第一个按钮时，分部元素向左移动，点击第二个按钮时，它向右移动，只是通过更新左属性。

注意：记得将位置设置为分部元素的绝对位置，因为左属性不能用于静态定位的元素。

例子：在这个例子中，除法元素通过点击两个按钮来实现动画效果，除法元素的缓和属性为slow。第一个按钮的类别为left-arrow，将左边属性减少25像素，而第二个按钮的类别为right-arrow，将左边属性增加25像素。

<!DOCTYPE html>
<html>
  <head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </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>

输出:

如何用jQuery将DIV的左边属性用相对值做成动画？