Проигрываение 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, время: 09:03. |