Проигрываение 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"; } |
yuriymos,
а почему оно должно остановиться? |
Я как раз и не хочу, чтобы оно останавливалось. Но как только я увожу с позиции указатель мыши, движение блока прекращается, как будто кто-то нажал на паузу. Только подведу, опять продолжает блок двигаться, уберу - опять останавливается.
|
yuriymos,
сделайте минимальный макет. |
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> |
рони, спасибо. Проверил. Работает, как и должно без остановок.
Дело в том, что я настраиваю для себя внешний вид фаерфокса и хотел сделать так, чтобы при наведению на кнопку выезжала некоторая панель. Навожу. Она начинает выезжать. Но чтобы она выехала до конца, нужно держать указатель мыши над кнопкой, иначе возникает что-то типа паузы анимации. Я не знаю почему, видать, у фаерфокса закодили так, чтобы прекращалась анимация при onmouseout. Интересно, можно ли на jscript написать такой код, чтобы анимация transition отработала до конца? |
Цитата:
Цитата:
JS-Анимация |
Спасибо. Посмотрю. Если получится, отпишусь.
|
Еще раз спасибо!
Заработало!!! |
Часовой пояс GMT +3, время: 20:15. |