Fade div без .fadeIn () и .fadeOut ()

Question

Я пытаюсь показать предупреждение на своей странице некоторое время, а затем скрыть его.

Мне нужно сделать это без использования .fadeIn() и .fadeOut(), потому что это меняет свойство отображения CSS и портит мое оповещение.

Итак, я нашел это другому? )

$('#container').animate({'opacity': 1}, 1000, function () {
    $(this).text('new text');
}).animate({'opacity': 0}, 1000);

И это работает.

Проблема в том, что он отображается и прячется слишком быстро, и мне нужно некоторое время держать сообщение на экране , прежде чем оно исчезнет. Есть ли способ добавить задержку в этом?

Как я могу это сделать?

jquery html css

1

perozzo 30 Апр 2019 в 23:28

Answer 1

Таким образом, вы можете сделать это в несколько шагов.

Если он начинается скрытно, вы можете пойти дальше и изменить текст.
После того, как вы измените его, анимируйте непрозрачность, чтобы затемнить его.
После этого отложите следующую анимацию на столько времени, сколько хотите, чтобы она была видимой.
После задержки спрячьте снова

$('#container')
  .text('My error Text')
  .animate({ opacity: 1 }, 1000)
  .delay(3000)
  .animate({ opacity: 0}, 1000);

#container {
  opacity: 0;
  border-color: rgb(64, 32, 32);
  background-color: rgb(128, 32, 32);
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
</div>

2

Taplar 30 Апр 2019 в 21:02

Answer 2

Попробуй это:

$('#container').animate({'opacity': 0.5}, 1000).animate({'opacity': 1}, 1000, function () {
    $(this).text('new text');
});

Это заставит анимацию занять 1 секунду, чтобы перейти от скрытой к наполовину непрозрачности, затем она выполнит вторую анимацию, в которой вы будете изменять текст и затем переходить от 0,5 к полной непрозрачности. Дайте мне знать, если это работает и делает то, что вам нужно.

Если вы пытаетесь скрыть свое предупреждение ПОСЛЕ того, как вы показали его на пару секунд, сделайте следующее:

$('#container').animate({'opacity': 1}, 1000, function () {
   $(this).text('new text');
}).animate({'opacity': 0}, 1000);

1

Mauricio Cárdenas 30 Апр 2019 в 20:55

Answer 3

Функция animate принимает значение «duration» в качестве параметра, поэтому 1000 в коде означает 1 тысячу миллисекунд = 1 секунду.

Просто используйте меньшее значение в непрозрачности 1, чтобы показать его сразу, и большее в непрозрачности: 0

Любить:

    $('#container').animate({'opacity': 1}, 100, function () {
    $(this).text('new text');
}).animate({'opacity': 0}, 7000);

Это покажет текст в 100 миллисекунд и исчезнет через 7 секунд.

1

Alex Angelico 30 Апр 2019 в 21:06

Fade div без .fadeIn () и .fadeOut ()

3 ответа

Похожие вопросы

Связанные вопросы

Новые вопросы

jquery