我试图在我的页面中显示警报一段时间,然后隐藏它。
我需要在不使用.fadeIn()
和.fadeOut()
的情况下执行此操作,因为它会更改 CSS 显示属性并弄乱我的警报。
所以,我发现了这个(jQuery文本淡入淡出/从一个文本过渡到另一个文本?
$('#container').animate({'opacity': 1}, 1000, function () {
$(this).text('new text');
}).animate({'opacity': 0}, 1000);
它正在起作用。
问题是它显示和隐藏得太快,我需要在它消失之前在屏幕上保留消息一段时间。有没有办法在其中添加延迟?
我该怎么做?
所以你可以分步走。
- 如果它开始隐藏,您可以继续更改文本。
- 更改后,对不透明度进行动画处理以将其淡入
- 完成此操作后,将下一个动画延迟多长时间,无论您希望它可见多长时间。
- 延迟后,再次隐藏
$('#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>
试试这个:
$('#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);
animate 函数将"duration"作为参数,因此代码中的1000
表示 1000 毫秒 = 1 秒
只需在不透明度 1 中使用较小的值即可立即显示它,并在不透明度中使用较大的值:0
喜欢:
$('#container').animate({'opacity': 1}, 100, function () {
$(this).text('new text');
}).animate({'opacity': 0}, 7000);
这将以 100 毫森康显示文本,并在 7 秒内淡入淡出。