不带.fadeIn()和.fadeOut()的淡入div
不带.fadeIn()和.fadeOut()的淡入div
提问于 2019-04-30 12:28:52
我试图在我的页面上显示一段时间的警报，然后隐藏它。
我需要在不使用.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);而且起作用了。
问题是它显示和隐藏得太快了，我需要在消息消失之前将消息保存在屏幕上一段时间。有什么办法增加延迟吗？
我怎么能这么做？
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-04-30 13:02:03
这样你就可以分步行动了。
- 如果它开始隐藏，您可以继续并更改文本。
- 在您更改它之后，将不透明度动画化以使其消失。
- 在完成之后，将下一个动画延迟多久，您希望它是可见的。
- 延迟之后，再把它藏起来
$('#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>
Stack Overflow用户
发布于 2019-04-30 12:55:26
试试这个：
$('#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);Stack Overflow用户
发布于 2019-04-30 13:06:57
动画函数以“持续时间”作为参数，因此代码中的1000表示1,000 milliseconds= 1秒。
只需在不透明度1中使用一个较小的值，以间接地显示它，在不透明度中使用一个较大的值:0。
像这样：
$('#container').animate({'opacity': 1}, 100, function () {
$(this).text('new text');
}).animate({'opacity': 0}, 7000);这将在100毫秒内显示文本，并在7秒内淡出。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55928246
复制相关文章
点击加载更多
相似问题
Livewire -检测到多个根元素
Livewire:检测到多个根元素。这是不支持的。
Laravel Livewire超时
多个设备(实例)之间的Laravel livewire同步
检测到空的XML根元素
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
