Анимация залипания кнопки

[Vlasenko Fedor]

тогда так к примеру, я поставил setTimeoutвместо функции которая должна выполнится

<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, .sbutton[disabled] {
    position:relative;
    opacity : 0.5;
    filter:alpha(opacity=50);
    top:1px;
  }
</style>
<input id="btn" class="sbutton" value="Кнопка" type="button" />
<script>
  document.getElementById('btn').onclick = function () {
    alert('Yes');
    this.disabled = true;
    var that = this;
    setTimeout(function () {
      that.disabled = false;
    }, 5000);
  };
</script>

[bes]

Poznakomlus, попробуй решить другую задачу

<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, .sbutton[disabled] {
    position:relative;
    opacity : 0.5;
    filter:alpha(opacity=50);
    top:1px;
  }
</style>
<a id="btn" class="sbutton">Кнопка</a>

<script>
  document.getElementById('btn').onclick = function () {
	//хочу быть зелёным
	this.style.background = "green";
	this.disabled = true;
	this.style.background = "green";
	myfunc(2000);
	this.style.background = "green";
	this.disabled = false;
	this.style.background = "#cb3131";

  };
  function myfunc(ms) {
	ms += new Date().getTime();
	while (new Date() < ms){
		console.log(ms);
	}
}
</script>

[Vlasenko Fedor]

попробовал

<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, .sbutton[disabled] {
    position:relative;
    background: green;
    opacity : 0.5;
    filter:alpha(opacity=50);
    top:1px;
  }
</style>
<a id="btn" class="sbutton">Кнопка</a>
<script>
  document.getElementById('btn').onclick = function () {
    this.disabled = true;
    myfunc.call(this, 2000);
  };

  function myfunc(ms) {
    ms += new Date().getTime();
    while (new Date() < ms) {
      console.log(ms);
      this.disabled = false;
    }
  }
</script>

[SmilingDog]

Спасибо большое . Да это то что я хотел .
Не думал , что простые кнопочки могут создать такой геморрой .

На практике применить пока не вышло . Надеюсь разберусь завтра .

[bes]

попробовал

испортил функцию


Poznakomlus,

  function myfunc(ms) {
39
    ms += new Date().getTime();
40
    while (new Date() < ms) {
41
      console.log(ms);
42
      this.disabled = false;
43
    }
44
  }

<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, .sbutton[disabled] {
    position:relative;
    background: green;
    opacity : 0.5;
    filter:alpha(opacity=50);
    top:1px;
  }
</style>
<a id="btn" class="sbutton">Кнопка</a>
<script>
  document.getElementById('btn').onclick = function () {
    this.disabled = true;
    myfunc.call(this, 2000);
  };

  function myfunc(ms) {
    ms += new Date().getTime();
    while (new Date() < ms) {
      console.log(ms);
    }
	this.disabled = false;
  }
</script>