Как анимировать левое свойство div с относительным значением с помощью jQuery?
В этой статье мы узнаем, как с помощью jQuery анимировать свойство left элемента разделения с относительным значением. Это можно использовать в ситуациях, когда элемент разделения должен быть анимирован с использованием только одного свойства.
Подход: мы будем использовать методы jQuery click() и animate().
- Элемент разделения, который необходимо анимировать, имеет класс animate-div .
- Определены две кнопки с классами со стрелками влево и вправо соответственно, которые при нажатии вызывают метод animate() , применяемый к элементу разделения. Метод animate() состоит из двух параметров. Первый параметр содержит стиль левого свойства, которому присваивается новое значение. Второй параметр задает скорость анимации с использованием свойства easing , определенного в этом параметре.
- Первая кнопка с классом стрелки влево уменьшает свойство left на некоторое значение, тогда как вторая кнопка с классом стрелки вправо увеличивает свойство left на некоторое значение. Таким образом, элемент разделения перемещается влево при нажатии первой кнопки и перемещается вправо при нажатии второй кнопки, просто обновляя свойство left.
Примечание. Не забудьте установить абсолютную позицию элемента разделения, поскольку свойство left нельзя использовать для статически позиционированных элементов.
Пример: в этом примере элемент разделения анимируется нажатием двух кнопок, а элемент разделения имеет свойство замедления замедления. Первая кнопка со стрелкой влево уменьшает свойство left на 25 пикселей, а вторая кнопка со стрелкой вправо увеличивает свойство left на 25 пикселей.
Выход:
