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

Question

当 AJAX 调用完成时，我想向用户显示一条消息，该消息显示 3 秒 - 然后淡出。另外，我希望这条消息在他按下按钮之前显示 - #btnSubmit。

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

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

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

Answer 1

使用insertBefore()代替before()

$(function() {
    $('<div>Success</div>')
    .insertBefore('#btnSubmit')
    .delay(3000)
    .fadeOut(function() {
      $(this).remove(); 
    });
});

<button id="btnSubmit">button</button> 

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

以便将效果和延迟应用于新注入(inject)的元素。

关于 insertBefore() 的更多信息:http://api.jquery.com/insertBefore/