jQuery: скрытие кнопки на 3 секунды. setInterval/.hide или toggleClass?

Я ищу быстрый совет. Я новичок в Javascript, и мне поручили сделать простую игру. Одним из элементов этой игры является наличие кнопки «Атака», которая исчезает на три секунды при каждом нажатии. Затем он снова появляется.

Я смотрел на различные коды, которые я могу сделать с этим, и мне было интересно, есть ли у кого-нибудь рекомендации относительно того, что проще в использовании, а также просто помощь с синтаксисом. Мои первоначальные мысли были сделать это:

В JS-файле:

var attack_button = $('.attack');
attack_button.click(function() {
    $(this).toggleClass('invisible');

В файле CSS:

.invisible {
    visibility: hidden;
}

Однако есть ли таймер, который можно легко установить на toggleClass, чтобы он длился всего три секунды?

Я также думал, что я мог бы сделать это:

В JS-файле:

setInterval(function() {
    attack_button.hide() }, 3000 }

Какие-либо предложения? Я не смогу консультироваться с инструкторами в течение нескольких дней, и я хотел бы получить работу сейчас.


javascript hide jquery setinterval toggleclass
person Leia_Organa    schedule 12.12.2015    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Вы можете использовать setTimeout();

Думаю, это тот код, который вам нужен

var attack_button = $('.attack');
attack_button.click(function() {
  var ThisIt = $(this);
  ThisIt.addClass('invisible');
  setTimeout(function(){
    ThisIt.removeClass('invisible');
  } , 3000);
});

Рабочая демонстрация

Демонстрация с эффектом затухания

Примечание: обязательно включите jquery

person Mohamed-Yousef    schedule 12.12.2015