jQuery: скрыть div при загрузке страницы и показать div с переходом

Question

В настоящее время я работаю над проектом, и у меня возникают проблемы с текстом раздела моего героя jQuery. Сценарий таков: когда страница загружается, текст не должен отображаться, но когда он загружен, текст будет отображаться.

Вот мой код CSS:

.hero_description{
  visibility: hidden;
}

, а вот мойjQuery:

jQuery(function($) {
    jQuery('.hero_description').show();
},2000);

Проблема в том, что он не показывает надлежащий переход, так как он рендерит сначала сверху, а после того, как рендерится другие его CSS-стили, он уходит на свое место в середине.

Answer 1

Если вы хотите, чтобы он отображался с переходом, вам нужно будет использовать fadeIn() вместо show(). Также убедитесь, что hide() элемент в первую очередь, чтобы предотвратить любое мерцание.

jQuery('.hero_description').hide().fadeIn(2000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
content above
<div class="hero_description">DESCRIPTION HERE</div>
content below

Answer 2

очень просто

$('.hero_description').fadeIn(2000);

JS Fiddle