Мучаюсь с анимацией нажатия на кнопку . По-идее код устанавливает callback и при нажатии на кнопку
а) Задает стиль кнопки opacity:0.5
б) Удаляет сам коллбек с кнопки . (Чтобы предотвратить повторное нажатие).
в) Исполняет некую полезную функцию
г) После ее окончания восстанавливает коллбек и opacity:1;
По непонятной с моей колоколенки причине анимация кнопки либо
а) Не работает
б) Работает deactivate , если закоментить последующий activate внутри коллбека .
в) Самое странное . Если раскоментить alert'ы внутри функций то все работает как надо .
Милостивые государи , помогите мне понять сию мистификацию .
Собственно вот код .
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"></head>
<body>
<a id="btn" class="sbutton">Кнопка</a>
<script src="knopka.js"></script>
</body>
</html>
style.css
.sbutton {
background: #cb3131; /* Цвет фона */
padding: 10px 5px; /* Поля вокруг текста */
margin: 0px;
font-size:14px;
font-weight:600;
color: #FFFFFF; /* Цвет шрифта */
text-align: center; /* Надпись на кнопке по центру */
border: solid 0px #73C8F0; /* Параметры рамки кнопки */
cursor: pointer; /* Изменение вида курсора при наведении*/
border-radius: 5px;
overflow:hidden;
opacity : 1;
}
и knopka.js
function removeBtnCallback() {
var p = document.getElementById("btn");
if(p)
p.removeEventListener("click", btnCallback);
p.style.opacity = 0.5;
//alert("removeBtnCallback");
}
function addBtnCallback() {
var btn = document.getElementById("btn");
if(btn)
btn.addEventListener("click", btnCallback , false);
btn.style.opacity = 1;
//alert("addBtnCallback");
}
function btnCallback() {
removeBtnCallback();
__sleep(5000);
addBtnCallback();
}
function __sleep(ms) {
//alert("sleep");
ms += new Date().getTime();
while (new Date() < ms){}
}
addBtnCallback();