如何使用 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
输出: