引导警报自动关闭

Question

我需要在单击“添加到愿望清单”按钮时调用警报，并且应该在 2 秒内消失警报。这就是我尝试过的方法，但是警报一出现就会立即消失。不确定，错误在哪里..有人可以帮我吗？

JS 脚本

$(document).ready (function(){
   $("#success-alert").hide();
   $("#myWish").click(function showAlert() {
      $("#success-alert").alert();
      window.setTimeout(function () {
         $("#success-alert").alert('close');
      }, 2000);
   });
});

HTML 代码：

<div class="product-options">
   <a id="myWish" href="" class="btn btn-mini">Add to Wishlist </a>
   <a href="#" class="btn btn-mini"> Purchase </a>
</div>

警报框：

<div class="alert alert-success" id="success-alert">
   <button type="button" class="close" data-dismiss="alert">x</button>
   <strong>Success!</strong>
   Product have added to your wishlist.
</div>

原文由 srikanth_naalla 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

为了顺利上滑：-

 $("#success-alert").fadeTo(2000, 500).slideUp(500, function(){
 $("#success-alert").slideUp(500);
 });

---

 $(document).ready(function() {
 $("#success-alert").hide();
 $("#myWish").click(function showAlert() {
 $("#success-alert").fadeTo(2000, 500).slideUp(500, function() {
 $("#success-alert").slideUp(500);
 });
 });
 });

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

 <div class="product-options">
 <a id="myWish" href="javascript:;" class="btn btn-mini">Add to Wishlist </a>
 <a href="" class="btn btn-mini"> Purchase </a>
 </div>
 <div class="alert alert-success" id="success-alert">
 <button type="button" class="close" data-dismiss="alert">x</button>
 <strong>Success! </strong> Product have added to your wishlist.
 </div>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

原文由 AyB 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

在“I Can Has Kittenz”的代码中使用 fadeTo() 在 2 秒内逐渐变为 500 的不透明度对我来说不可读。我认为最好使用其他选项，例如 delay()

 $(".alert").delay(4000).slideUp(200, function() {
    $(this).alert('close');
});

原文由 Alex Fuentes 发布，翻译遵循 CC BY-SA 3.0 许可协议