在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();

Answer 3

Router(app);