在jQuery中显示警报，持续几秒钟后淡出。

Question

当 AJAX 请求完成后，我想向用户显示一个信息，展示 3 秒钟，然后淡出。同时，我希望这个信息在他按下的按钮 #btnSubmit 的前面显示。

以下是我的代码（它无法正常工作 - 淡出的是按钮而不是信息）：

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

我该如何在jQuery中淡出这个动态生成的元素？

- FloatingRock

---

一个相关的库：http://boedesign.com/blog/2009/07/11/growl-for-jquery-gritter/ - luxcem

我们可以看到更多的HTML代码吗？ - AllInOne

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>

这样可以使效果和延迟应用到新插入的元素。

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

- Fabrizio Calderan

---

太完美了！非常感谢。 - FloatingRock

我建议在完成后删除这个 div。 - Kevin B

@KevinB 这样做是通过在行末添加 .remove() 吗？ - FloatingRock

Answer 2

你在调用 #btnSubmit 上的 fadeOut 方法。

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

- AfromanJ

---

啊哈，谢谢Afroman - 我在引用警报时遇到了麻烦，完全忘记了我可以使用id ='...'。好想法！可惜我只能选择一个答案 - 而Fabrizio是第一个 :/ - FloatingRock

@FloatingRock，这绝不应该是速度的问题，只需选择你认为正确/优雅/高效/...的答案。 - Fabrizio Calderan

@FabrizioCalderan，你的代码只有一行 :) - FloatingRock

@FabrizioCalderan 我同意你的答案更好，我只是不想抄袭它！ :) - AfromanJ

Answer 3

$("#success").show();

setTimeout(function() { $("#success").hide(); }, 5000);

- Amit bhalani