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

Вот мой код CSS:

.hero_description{
  visibility: hidden;
}

И вот мой JQuery:

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

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

0
danedelions_swift 22 Окт 2019 в 18:45

2 ответа

Лучший ответ

Если вы хотите, чтобы он отображался с переходом, вам нужно использовать 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
1
Constantin Groß 22 Окт 2019 в 15:57

Это очень просто

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

JS Fiddle

0
Markus Dresch 22 Окт 2019 в 16:57
58507946