Появление блока на определенный период jQuery

378

07 апреля 2017, 23:29

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

По отдельности я знаю как сделать появление и скрывание элемента с анимацией, но как задействовать settimeout - не знаю.

Вот пример кода:

.box-size { 
height: 200px; 
width: 200px; 
border: 1px solid #000; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<form> 
<div class="box-size"> 
<a class="click-btn">Нажать</a> 
</div> 
<button class="button">Кнопка</button> 
</form> 
 
<script> 
$(".click-btn").click(function() { 
$('.button').appendTo(this); 
}); 
</script>

Answer 1

Кнопку изначально делать невидимой, при клике показывать и ставить таймаут на 2 сек на скрытие.

$(".click-btn").click(function() { 
  $('.button').show(); 
  setTimeout(function() { 
    $('.button').hide(); 
  }, 2000); 
});

.box-size { 
  height: 200px; 
  width: 200px; 
  border: 1px solid #000; 
} 
 
.button { 
  display: none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<form> 
  <div class="box-size"> 
    <a class="click-btn">Нажать</a> 
  </div> 
  <button class="button">Кнопка</button> 
</form>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

При клике на элемент меню, меню скрывается

Есть выпадающее меню на jQueryХочу сделать так, чтоб при клике на ссылку меню все таки закрывалось, а не оставалось открытым

304

javascript

Добавленный div не смещается вниз JQuery

Нужно чтобы при клике на кнопку добавлялся блок div, внутри которого будут параграфы, но при добавлении они все накладываются друг на друга,...

366

javascript

Как обнулять таймаут jQuery при каждом клике?

Мне нужно чтобы при каждом клике на label рядом появлялась кнопка на 4 секунды, и при каждом клике нужно чтобы она появлялась заново на 4 секСейчас...

438

jQuery

Активность кнопки по времени rails

Проблема заключается в том, что понятия не имею как записать логикуИмеется страничка тех

333