没有.fadeIn（）和.fadeOut（）的Fade div

Question

我试图在页面上显示警报一段时间，然后将其隐藏。

我需要在不使用.fadeIn()和.fadeOut()的情况下执行此操作，因为它会更改CSS显示属性并弄乱我的警报。

因此，我发现了这个（jQuery text fade/transition from one text to another?）：

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

它正在工作。

问题在于它显示和隐藏得太快，我需要在屏幕上将消息保留一段时间，然后消息消失。有没有办法增加延迟呢？

我该怎么做？

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>

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);

Answer 3

动画函数将“持续时间”作为参数，因此代码中的1000表示1毫秒= 1秒

只需在不透明度1中使用较小的值即可立即显示，在不透明度0中使用较大的值

喜欢：

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

这将以100毫秒显示文本，并在7秒钟内使其消失。