📜  如何为第一个 div left 属性设置动画并同步剩余的 div?

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

如何为第一个 div left 属性设置动画并同步剩余的 div?

在本文中,我们将学习如何使一个分割元素的 left 属性与其他分割元素同步。这可以用于多个分割元素必须重新定位或仅使用一个属性设置动画的情况。

方法:我们将使用 jQuery click()、animate()、gt() 和 css() 方法。每个需要动画的元素都会有一个“gfg-animate”类。

定义了一个具有“animation-btn”类的按钮,单击该按钮将触发应用于第一个除法元素的animate()方法。 animate()方法由两个参数组成。第一个参数包含左侧属性的样式,该样式被修改为新值。第二个参数使用此参数中定义的持续时间属性设置参数的速度。

接下来,使用step函数相对于第一个除法元素的左属性为所有除法元素的左属性设置动画。使用 step函数中的css()方法修改除法元素的 left 属性。使用gt()方法选择所有除法元素,并将索引指定为 0。

注意:请记住将位置设置为所有除法元素的相对位置,因为每个除法元素都必须相对于第一个除法元素同步。

例子:在这个例子中,所有的分割元素都根据第一个分割元素的left属性(即 250)动画持续 3 秒。

HTML


  

    
  
    
    

  

    

GeeksforGeeks

    
    
    
    
            


输出: