Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Проигрываение onmouseover до конца (https://javascript.ru/forum/dom-window/73449-proigryvaenie-onmouseover-do-konca.html)

yuriymos 17.04.2018 01:36

Проигрываение onmouseover до конца
 
Помогите, пожалуйста с такой проблемой.
Есть элемент (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";
  }

рони 17.04.2018 02:18

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

yuriymos 17.04.2018 02:34

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

рони 17.04.2018 02:48

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

рони 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 17.04.2018 03:14

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

рони 17.04.2018 09:02

Цитата:

Сообщение от yuriymos
у фаерфокса закодили так

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

Сообщение от yuriymos
можно ли на jscript написать такой код

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

yuriymos 17.04.2018 09:25

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

yuriymos 17.04.2018 14:01

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


Часовой пояс GMT +3, время: 20:15.