Как написать код на jquery. Надо добавлять слово и чтоб оно через 5 секунд исчезало. А через кнопку отобразить появлялось. Я незнаю как это сделать
body {
text-align: center;
margin: 0;
font-family: Verdana, Arial, sans-serif;
font-size: 16px;
}
.todo {
display: inline-block;
margin: 20px auto;
border: 2px solid #eee;
padding: 10px 20px;
}
.todo__text,
.todo__add,
.todo__li {
font-family: Verdana, Arial, sans-serif;
font-size: 16px;
}
.todo__li,
.todo__add {
padding: 5px 10px;
}
.bot{
margin: 10px 20px 10px 20px;
}
.todo__text {
padding: 5px;
}
.todo__list {
text-align: left;
list-style-type: none;
padding-left: 0px;
}
.todo__list-item {
cursor: pointer;
padding: 5px;
line-height: 20px;
}
.todo__list-item:nth-child(even) {
background-color: #eee;
}
.todo__list-item:hover {
background-color: #aaa;
}
.todo__list-item_completed_yes {
text-decoration: line-through;
}
.todo__list-item-text {
display: inline-block;
max-width: 480px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.todo__list-item_completed_yes .todo__list-item-text {
text-decoration: line-through;
}
.todo__list-item-remove {
float: right;
opacity: 0.3;
margin-left: 15px;
}
.todo__list-item-remove:hover {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="list" class="todo">
<h2 class="todo__caption">Список дел</h2>
<div class="todo__controls">
<input type="text" class="todo__text" />
<div class="bot">
<button disabled="disabled" class="todo__add" >Добавить</button>
<button disabled="disabled" class="todo__li">Отобразить</button>
<div ><ul class="todo__list" id="leftFit"></ul></div>
</div>
</div>
</div>
Ответы (1 шт):
Автор решения: ArchDemon
→ Ссылка
Было так сложно?
$(function() {
$(".todo__list").delay(5000).slideUp(300);
$(".todo__li").click(e => {
$(".todo__list").slideDown(300);
})
});
body {
text-align: center;
margin: 0;
font-family: Verdana, Arial, sans-serif;
font-size: 16px;
}
.todo {
display: inline-block;
margin: 20px auto;
border: 2px solid #eee;
padding: 10px 20px;
}
.todo__text,
.todo__add,
.todo__li {
font-family: Verdana, Arial, sans-serif;
font-size: 16px;
}
.todo__li,
.todo__add {
padding: 5px 10px;
}
.bot {
margin: 10px 20px 10px 20px;
}
.todo__text {
padding: 5px;
}
.todo__list {
text-align: left;
list-style-type: none;
padding-left: 0px;
}
.todo__list-item {
cursor: pointer;
padding: 5px;
line-height: 20px;
}
.todo__list-item:nth-child(even) {
background-color: #eee;
}
.todo__list-item:hover {
background-color: #aaa;
}
.todo__list-item_completed_yes {
text-decoration: line-through;
}
.todo__list-item-text {
display: inline-block;
max-width: 480px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.todo__list-item_completed_yes .todo__list-item-text {
text-decoration: line-through;
}
.todo__list-item-remove {
float: right;
opacity: 0.3;
margin-left: 15px;
}
.todo__list-item-remove:hover {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="list" class="todo">
<h2 class="todo__caption">Список дел</h2>
<div class="todo__controls">
<input type="text" class="todo__text" />
<div class="bot">
<button disabled="disabled" class="todo__add">Добавить</button>
<button class="todo__li">Отобразить</button>
<div>
<ul class="todo__list" id="leftFit">
<li>сложное дело</li>
</ul>
</div>
</div>
</div>
</div>