Можно каким-то образом получить оставшееся время в конкретный момент времени от .animate()?

20 сентября 2021, 03:50

Допустим, есть такой код:

$p.animate({
  'background-color': 'red',
  'color': 'green',
  'padding': '10px'
}, 1000);

Я хочу дальше по щелчку мыши, например, остановить .animate() и узнать оставшееся время, чтобы запустить другой animate - который будет откатывать изменения первого. Как остановить я знаю. А вот как получить оставшееся время? Или хотя бы время, которое прошло после начала анимации (я вычту его из 1000)?

Answer 1

можно с началом анимации записывать текущий timestamp, потом при остановке брать уже timestamp в момент остановки и отнимать от него записанный в момент запуска, получите время прошедшее с начала анимации

Date.now() возвращает количество миллисекунд, прошедших с 1 января 1970 года

let time; 
 
$('#start').on('click', () => { 
  $('p').animate({ 
    'padding': '100px' 
  }, 3000); 
  time = Date.now(); 
}); 
 
$('#stop').on('click', () => { 
  $('p').stop().animate({ 
    'padding': '0px' 
  }, Date.now() - time); 
});

p{ 
  background: #ccc; 
  height: 30px; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<button id="start">start</button> 
<button id="stop">stop</button> 
<p></p>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

ошибка синтаксиса Jquery

разворачиваю проект на VDS сервереОтладчик выдал ошибку скрипте jquery: SyntaxError: ',:x' is not a valid selector*

129

javascript

Redux form и проблемный инпут

Есть две формы,регисnрация и авторизацияС регистрацией все норм

164

c++

Конкатенация строк на С++

Помогите с таким заданием: мы получаем две строки(символьных массива), и передаём их в функцию для конкатенации(это я сделал только как-то...

144

c++

среда разработки NetBeans для с++ выдает ошибку error 2

установила NetBenas, все средства Cygwin(g++,make,gdb) установилакомпилирую код выдает ошибку Error2(в интернете пишут что это дважды определили main, хотя...

154