在jQuery中显示警报几秒钟然后淡出

Question

当AJAX调用完成时,我想向用户显示一条消息,显示3秒钟 - 然后淡出.此外,我希望此消息显示在他按下的按钮之前 - #btnSubmit.

这是我的代码(它不起作用 - 淡出按钮而不是消息):

if(response == 'success') {
   $('#btnSubmit').before('<div>Success!</div>').delay(3000).fadeOut();
}

关于如何在jQuery中淡出这个动态生成的元素的任何想法？

Answer 1

用insertBefore()而不是before()

$('<div>Success!</div>').insertBefore('#btnSubmit').delay(3000).fadeOut();

以便将效果和延迟应用于新注入的元素.
示例代码:http://codepen.io/anon/pen/bkjuF

如果您需要在效果完成后删除div,如下面的@kevinB所示,只需使用回调即可

...
.delay(3000)
.fadeOut(function() {
   $(this).remove(); 
});

有关以下内容的更多信息insertBefore():http://api.jquery.com/insertBefore/

Answer 2

你打电话fadeOut的#btnSubmit.

$('#btnSubmit').before('<div id="success">Success!</div>');
$('#success').delay(3000).fadeOut();