Как написать код на 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>

→ Ссылка