Форум

yuriymos · #1 (**permalink**) 17.04.2018, 01:36

Помогите, пожалуйста с такой проблемой.
Есть элемент (PersonalToolbar), который двигается и появляется (типа выезжает) при наведении мышки на некую кнопку (show-PersonalToolbar).
Если я убираю мышку от кнопки действие приостанавливается.
Как сделать так, чтобы, если навел мышку на кнопку (onmouseover), действие начало выполняться, убрал мышку в сторону, а оно (это действие) продолжает дальше выполняться до конца без остановки?

В общем, мне нужно, чтобы действие onmouseover (длится несколько секунд) отработало до конца, не смотря на то, что я убрал в сторону указатель мыши. Спасибо.

Кусок кода, чтобы понять, где этот onmouseover вписан:

PersonalToolbar = document.getElementById('PersonalToolbar');

document.getElementById("show-PersonalToolbar").onmouseover = function() {
  PersonalToolbar.style.marginTop = "inherit";
  PersonalToolbar.style.opacity = "1.0"; 
  PersonalToolbar.style.transitionDelay = "0.3s";
  }

рони · #2 (**permalink**) 17.04.2018, 02:18

yuriymos,
а почему оно должно остановиться?

yuriymos · #3 (**permalink**) 17.04.2018, 02:34

Я как раз и не хочу, чтобы оно останавливалось. Но как только я увожу с позиции указатель мыши, движение блока прекращается, как будто кто-то нажал на паузу. Только подведу, опять продолжает блок двигаться, уберу - опять останавливается.

рони · #4 (**permalink**) 17.04.2018, 02:48

yuriymos,
сделайте минимальный макет.

рони · #5 (**permalink**) 17.04.2018, 02:52

yuriymos,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">


  <style type="text/css">
  div.hot{
      width: 300px;
      height: 100px;
      border: 1px dashed Gray;
      padding: 5px;
  }
  .Red{
      background-color: Red;
      transition-duration: 8s;
      opacity: 0;
  }

  </style>
</head>

<body>
<button id="show-PersonalToolbar">show-PersonalToolbar</button>


<div class="hot Red" id="PersonalToolbar"></div>
<script>
PersonalToolbar = document.getElementById('PersonalToolbar');

document.getElementById("show-PersonalToolbar").onmouseover = function() {
  PersonalToolbar.style.marginTop = "inherit";
  PersonalToolbar.style.opacity = "1.0";
  PersonalToolbar.style.transitionDelay = "0.3s";
  }

  </script>
</body>
</html>

yuriymos · #6 (**permalink**) 17.04.2018, 03:14

рони, спасибо. Проверил. Работает, как и должно без остановок.
Дело в том, что я настраиваю для себя внешний вид фаерфокса и хотел сделать так, чтобы при наведению на кнопку выезжала некоторая панель. Навожу. Она начинает выезжать. Но чтобы она выехала до конца, нужно держать указатель мыши над кнопкой, иначе возникает что-то типа паузы анимации. Я не знаю почему, видать, у фаерфокса закодили так, чтобы прекращалась анимация при onmouseout.
Интересно, можно ли на jscript написать такой код, чтобы анимация transition отработала до конца?

рони · #7 (**permalink**) 17.04.2018, 09:02

Сообщение от yuriymos

у фаерфокса закодили так

вы что-то не договариваите ...

Сообщение от yuriymos

можно ли на jscript написать такой код

да
JS-Анимация

yuriymos · #8 (**permalink**) 17.04.2018, 09:25

Спасибо. Посмотрю. Если получится, отпишусь.

yuriymos · #9 (**permalink**) 17.04.2018, 14:01

Еще раз спасибо!
Заработало!!!

Форум

Справочник

Discord чат

Курсы javascript