如何使用 jQuery 在淡出元素之前暂停?
-
09-06-2019 - |
题
我想在我的页面上闪烁一条成功消息。
我正在使用 jQuery fadeOut
方法淡入淡出然后删除元素。我可以增加持续时间以使其持续时间更长,但这看起来很奇怪。
我想要发生的是让元素显示五秒钟,然后快速消失,最后被删除。
如何使用 jQuery 为其添加动画效果?
解决方案
新的 delay()
jQuery 1.4 中的函数应该可以解决问题。
$('#foo').fadeIn(200).delay(5000).fadeOut(200).remove();
其他提示
使用 setTimeout(function(){$elem.hide();}, 5000);
在哪里 $elem
是您想要隐藏的元素,并且 5000
是以毫秒为单位的延迟。您实际上可以在调用中使用任何函数 setTimeout()
, ,为了简单起见,该代码仅定义了一个小的匿名函数。
虽然 @John Sheehan 的方法有效,但你会遇到 jQuery 淡入/淡出 ClearType 故障 在IE7中。就我个人而言,我会选择@John Millikin's setTimeout()
方法,但如果您选择纯 jQuery 方法,最好在非不透明属性(例如边距)上触发动画。
var left = parseInt($('#element').css('marginLeft'));
$('#element')
.animate({ marginLeft: left ? left : 0 }, 5000)
.fadeOut('fast');
如果你知道你的保证金是一个固定值,你可以更清晰一些:
$('#element')
.animate({ marginLeft: 0 }, 5000)
.fadeOut('fast');
编辑: :它看起来像 jQuery FxQueues 插件 正是您所需要的:
$('#element').fadeOut({
speed: 'fast',
preDelay: 5000
});
对于纯 jQuery 方法,你可以这样做
$("#element").animate({opacity: 1.0}, 5000).fadeOut();
这是一个 hack,但它可以完成工作
var $msg = $('#msg-container-id');
$msg.fadeIn(function(){
setTimeout(function(){
$msg.fadeOut(function(){
$msg.remove();
});
},5000);
});
根据 dansays 的评论,以下内容似乎运行良好:
$('#thing') .animate({dummy:1}, 2000)
.animate({ etc ... });
1.6.2 更新
内森·朗(Nathan Long)的回答将导致该元素弹出而不遵守延迟或 fadeOut
.
这有效:
$('#foo').delay(2000).fadeOut(2000);
丹赛斯的答案对我来说不起作用。因为某些原因, remove()
立即运行并且 div 在任何动画发生之前消失。
然而,以下工作(通过省略 remove()
方法):
$('#foo').fadeIn(500).delay(5000).fadeOut(500);
我不介意页面上是否有隐藏的 DIV(无论如何应该不会超过几个)。