📌  相关文章
📜  如何使用 jQuery 为 div 的 left 属性设置相对值的动画?

📅  最后修改于: 2022-05-13 01:56:01.111000             🧑  作者: Mango

如何使用 jQuery 为 div 的 left 属性设置相对值的动画?

在本文中,我们将学习如何使用 jQuery 为除法元素的 left 属性设置一个相对值的动画。这可以用于必须仅使用一个属性对分割元素进行动画处理的情况。

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

  • 必须进行动画处理的除法元素有一个 animate-div 类
  • 定义了两个分别具有左箭头右箭头类的按钮,单击它们将触发应用于除法元素的animate()方法。 animate()方法由两个参数组成。第一个参数包含左侧属性的样式,该样式被修改为新值。第二个参数使用此参数中定义的easing属性设置动画的速度。
  • 具有左箭头类的第一个按钮将 left 属性减少某个值,而具有右箭头类的第二个按钮将 left 属性增加某个值。因此,除法元素在单击第一个按钮时向左移动,在单击第二个按钮时向右移动,只需更新 left 属性即可。

注意:请记住将位置设置为除法元素的绝对位置,因为 left 属性不能用于静态定位的元素。

示例:在此示例中,通过单击两个按钮来对分割元素进行动画处理,并且分割元素的缓动属性为slow。具有左箭头类的第一个按钮将 left 属性减少 25 个像素,而具有右箭头类的第二个按钮将 left 属性增加 25 个像素。

HTML


  
    
  
    
    
  
  
  
    

GeeksforGeeks

    

      jQuery - Animate a div's left        property with a relative value     

                 
       


输出: