在使用jQuery淡化元素之前,你如何暂停？

Question

我想在我的页面上刷一个成功的消息.

我使用jQuery fadeOut方法淡化然后删除元素.我可以增加持续时间以使其持续更长时间,但这看起来很奇怪.

我想要发生的是让元素显示五秒钟,然后快速淡化,最后被删除.

你怎么能使用jQuery动画这个？

Answer 1

delay()jQuery 1.4中的新功能应该可以解决问题.

$('#foo').fadeIn(200).delay(5000).fadeOut(200).remove();

Answer 2

使用 setTimeout(function(){$elem.hide();}, 5000);

$elem您希望隐藏的元素在哪里,5000是以毫秒为单位的延迟.您实际上可以使用调用中的任何函数setTimeout(),该代码只是为了简单起见而定义了一个小的匿名函数.

Answer 3

虽然@John Sheehan的方法有效,但是你会遇到IE7中的jQuery fadeIn/fadeOut ClearType故障.就个人而言,我选择@John Millikin的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
});

Answer 4

对于纯jQuery方法,您可以这样做

$("#element").animate({opacity: 1.0}, 5000).fadeOut();

这是一个黑客,但它完成了这项工作