Как я могу пропорционально установить продолжительность этой анимации jQuery?
Я создал быстрый тест, чтобы показать, что я пытаюсь сделать:
Если вы нажмете «Переключить ширину» "один раз, квадрат вырастет до полной ширины за одну секунду. Щелкните его еще раз, и потребуется одна секунда, чтобы уменьшить его до нулевой ширины.
Однако, дважды быстро нажмите кнопку «Toggle Width» - второй раз, когда квадрат увеличился только до небольшой части своей общей ширины (например, 10%) - вы заметите, что анимация по-прежнему занимает некоторое время. полная секунда, чтобы вернуть квадрат к нулевой ширине, что выглядит неудобно, ИМО.
Хотя такое поведение является ожидаемым, я бы хотел, чтобы последняя анимация происходила за время, пропорциональное ширине, которую она покрывает. Другими словами, если вы нажмете «Переключить ширину» во второй раз, когда квадрат составляет 10% от его общей ширины, я бы хотел, чтобы для уменьшения до нулевой ширины потребовалось около 1/10 секунды.
Должно быть относительно легко (я думаю) сделать значение свойства duration динамическим, вычисляемым при запуске обработчика jQuery click , для измерения текущей ширины квадрат и соответственно определите продолжительность.
Однако я упустил лучший способ сделать это? Предоставляет ли jQuery простой способ или предоставляет какой-либо метод или свойство, чтобы сделать это проще?