Анимированное появление и исчезновение HTML элементов на JavaScript | jQuery

Для появлении и исчезновении элементов, будем использовать библиотеку jQuery (Как подключить библиотеку jQuery).

И без лишних слов, сразу к делу. Я написал вот такой код:
<button id="button">Показать</button>
<div style="display: none;">Скрытый текст</div>
<script>
$('#button').click(function() {
    $('div').show(1000);

    setTimeout(function() {
        $('div').hide(1000);
    }, 2000);
}); 
</script>

Данный код, после нажатия кнопки "Показать" разворачивает в течении одной секунды строчку "Скрытый текст", и ровно через две секунды (с момента нажатия кнопки) сворачивает текст обратно. Сворачивается строчка, так же одну секунду. Из-за того, что на появление и исчезновение заданно время, появление текста стало анимированным.

Постараюсь подробно объяснить, что происходит в нашем примере, так сказать, разберу код по отдельности. Первые две строчки:
<button id="button">Показать</button>
<div style="display: none;">Скрытый текст</div>

Это кнопка, с идентификатором button, после нажатия на которую, будет запущен сценарий. Дальше идет блок со свойством display: none, это свойство делает блок невидимым, а значит на странице мы не можем увидеть, что в нем находится, если только не изменим none на blok, тогда блок станет видимым.

Переходим к сценарию, строка:
$('#button').click(function() {

Тут мы "прицепились" к элементу с идентификатором button $('#button'), то есть к кнопке с надписью "Показать", и ждем, когда по этой кнопке будет выполнен клик .click. Если клик будет осуществлен, то начинается выполнение кода, помещенного в нашу функцию.

Строка кода:
    $('div').show(1000);

Отвечает за появление скрытого содержимого. Тут мы "прицепились" к невидимому блоку $('div') и функцией show делаем его видимым, а параметр - 1000 внутри этой функции - это время на появление скрытого блока в миллисекундах.

Двигаемся дальше, и следующие строки:
    setTimeout(function() {
        $('div').hide(1000);
    }, 2000);

Про функцию setTimeout, я совсем недавно писал в статье: Как установить задержку выполнения функции на JS, эта функция "выжидает" заданное время перед выполнением того или иного кода, который находится внутри этой функции. В данном примере, функция будет ждать 2000 миллисекунд, другими словами - две секунды. Строчкой ниже, мы опять "прицепились" к блоку, но теперь для того, чтобы его скрыть, за скрытие блока отвечает функция hide, с параметром 1000 (одна секунда). Функция hide начнет скрывать блок, только после того, как функция setTimeout отсчитает 2000 миллисекунд.

Вот и все, блок появился и исчез.
Надеюсь мой пост оказался полезным.
Спасибо за внимание.
Вопросы о рекламе пишите в ЛС.
Автор: