И без лишних слов, сразу к делу. Я написал вот такой код:
<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 миллисекунд.
Вот и все, блок появился и исчез.
Надеюсь мой пост оказался полезным.
Спасибо за внимание.
