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

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

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

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

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

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

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

1
perozzo 30 Апр 2019 в 23:28

3 ответа

Лучший ответ

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

  • Если он начинается скрытно, вы можете пойти дальше и изменить текст.
  • После того, как вы измените его, анимируйте непрозрачность, чтобы затемнить его.
  • После этого отложите следующую анимацию на столько времени, сколько хотите, чтобы она была видимой.
  • После задержки спрячьте снова
$('#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

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

$('#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

Функция 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