Анимация залипания кнопки
Мучаюсь с анимацией нажатия на кнопку . По-идее код устанавливает 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(); |
Забыл добавить - браузер chrome .
|
SmilingDog,
ставите флаг -- нажали проверили флаг --- занято return - свободно -- ставим флаг в занято - делаем что нужно -- что нужно в конце восстанавливает флаг. |
Пожалуй так действительно проще :)
Хотя почему мой вариант работает так странно все равно непонятно . |
это особенность прорисовки браузером
<style> .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; } </style> <a id="btn" class="sbutton">Кнопка</a> <script> document.querySelector(".sbutton").addEventListener("click", function () { this.style.opacity = "0.5"; var that = this; setTimeout(function () { myfunc(2000); that.style.opacity = 1; }, 0); }); function myfunc(ms) { ms += new Date().getTime(); while (new Date() < ms){ console.log(ms); } } </script> а здесь вычислять-вычисляю, но ни хрена не отображаю :) <style> .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; } </style> <a id="btn" class="sbutton">Кнопка</a> <script> document.querySelector(".sbutton").addEventListener("click", function () { this.style.opacity = "0.5"; myfunc(2000); this.style.opacity = 1; }); function myfunc(ms) { ms += new Date().getTime(); while (new Date() < ms){ console.log(ms); } } </script> |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru" dir="ltr"> <head> <title>Кнопка</title> </head> <body> <div id="pun"> <div class="punbb"> <!-- Коды Кнопки --> <div class="glass"> <a class="butt">hide</a> </div> <style type="text/css"> body { background: #ddd;width:100%; min-height:100px; widtH:100%; padding:0; margin:0; font: normal normal 400 16px/normal "Times New Roman"; } .glass { width: 100px; height: 100px; border-bottom: 2px solid #eee; background-image: -webkit-linear-gradient(top, #999, #d0d0d0 80% ); background-image: -moz-linear-gradient(top, #999, #d0d0d0 80% ); background-image: -ms-linear-gradient(top, #999, #d0d0d0 80% ); background-image: -o-linear-gradient(top, #999, #d0d0d0 80% ); background-image: linear-gradient(top, #999, #d0d0d0 80% ); -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; box-shadow: inset rgba(0,0,0,0.2) 0px 5px 6px ; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; position: absolute; -webkit-transform:scale(0.7); -moz-transform:scale(0.7); transform:scale(0.7); } .punbb a.butt { position: absolute; width: 80px; height: 52px; left: 10px; top: 10px; cursor: pointer; font-family: "Lucida Sans"; font-weight: bold; font-size: 23px; color: #888; text-shadow: 0px 1px 0px #fff; text-align: center; padding-top: 28px; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; background-image: -webkit-linear-gradient(top, #eee, #bbb 70%, #9f9f9f 100% ); background-image: -moz-linear-gradient(top, #eee, #bbb 70%, #9f9f9f 100% ); background-image: -ms-linear-gradient(top, #eee, #bbb 70%, #9f9f9f 100% ); background-image: -o-linear-gradient(top, #eee, #bbb 70%, #9f9f9f 100% ); background-image: linear-gradient(top, #eee, #bbb 70%, #9f9f9f 100% ); background-position: 0 6px; background-color: #eee; background-repeat: no-repeat; -webkit-box-shadow: rgba(0,0,0,.4) 0 3px 6px; -moz-box-shadow: rgba(0,0,0,.4) 0 3px 6px; box-shadow: rgba(0,0,0,.4) 0 3px 6px; -webkit-transition: all .1s ease-in; -moz-transition: all .1s ease-in; -ms-transition: all .1s ease-in; -o-transition: all .1s ease-in; transition: all .1s ease-in; } .punbb a.butt:hover { background-position: 0 0px; -webkit-box-shadow: rgba(0,0,0,.4) 0 3px 8px; -moz-box-shadow: rgba(0,0,0,.4) 0 3px 8px; box-shadow: rgba(0,0,0,.4) 0 3px 8px; } .punbb a.butt:active { width: 76px; height: 48px; margin: 2px 0 0 2px; border-bottom: 1px solid #fff; font-size: 21px; color: #777; -webkit-box-shadow: inset rgba(0,0,0,.5) 0px 5px 10px; -moz-box-shadow: inset rgba(0,0,0,.5) 0px 5px 10px; box-shadow: inset rgba(0,0,0,.5) 0px 5px 10px; }</style> </div> </div> </body> </html> |
Спасибо за примеры , но слишком многого в них не понимаю :cray:
Что можно почитать про "особенность прорисовки браузером" ? document.querySelector(".sbutton").addEventListener("click", function () { this.style.opacity = "0.5"; var that = this; setTimeout(function () { myfunc(2000); that.style.opacity = 1; }, 0); }); Почему тут вызов именно через setTimeout . По другому неполучится ? Почему неработает код document.querySelector(".sbutton").addEventListener("click", function () { this.style.opacity = "0.5"; myfunc(2000); this.style.opacity = 1; }); Я вроде понимаю(this меняет значение) . Но почему не работает тоже самое через вызов getElementById(элемент ведь остается на месте) или просто ?? this.style.opacity = "0.5"; var that = this; this.style.opacity = "0.5"; myfunc(2000); that.style.opacity = 1; В общем чувствую себя чайником :cray: |
Зачем этот велосипед если можно сделать все css
<style> .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; filter:alpha(opacity=100); } .sbutton:active { position:relative; opacity : 0.5; filter:alpha(opacity=50); top:1px; } </style> <a id="btn" class="sbutton">Кнопка</a> |
Цитата:
может быть requestAnimationFrame, но мне не удалось его прикрутить к этому случаю |
Велосипед затем что требуется сделать кнопку неактивной с момента нажатия и до завершения работы некоторой функции . Чтобы пользователь не вызывал функцию несколько раз подряд . Как я понимаю псевдокласс active отвечает за анимацию самого нажатия и все .
|
Часовой пояс GMT +3, время: 19:53. |