Bootstrap Alert Auto Close

Ich muss die Warnung anrufen, wenn ich auf die Schaltfläche Zur Wunschliste hinzufügen klicke, und die Warnung sollte in 2 Sekunden verschwinden. So habe ich es versucht, aber die Warnung verschwindet sofort, sobald sie angezeigt wird. Nicht sicher, wo der Fehler ist. Kann mir jemand helfen?

JS-Skript

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

HTML Quelltext:

<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>

Warnbox:

<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>

Für einen reibungslosen Ablauf:

$("#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>

Die Verwendung eines fadeTo()Codes, der im Code von "I Can Has Kittenz" in 2 Sekunden auf eine Deckkraft von 500 verblasst, ist für mich nicht lesbar. Ich denke, es ist besser, andere Optionen wie eine Verzögerung zu verwenden ()

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

Warum all die anderen Antworten verwendet werden, slideUpist mir ein Rätsel. Da ich die Klassen fadeund inverwende, um die Warnung beim Schließen (oder nach einer Zeitüberschreitung) auszublenden, möchte ich nicht, dass sie "nach oben rutscht" und damit in Konflikt steht.

Außerdem hat die slideUpMethode nicht einmal funktioniert. Der Alarm selbst wurde überhaupt nicht angezeigt. Folgendes hat bei mir perfekt funktioniert:

$(document).ready(function() {
    // show the alert
    setTimeout(function() {
        $(".alert").alert('close');
    }, 2000);
});

Ich fand das eine bessere Lösung

$(".alert-dismissible").fadeTo(2000, 500).slideUp(500, function(){
    $(".alert-dismissible").alert('close');
});

Eine weitere Lösung hierfür: Schließen oder Ausblenden der Bootstrap-Warnmeldung nach 5 Sekunden automatisch:

Dies ist der HTML-Code, mit dem die Nachricht angezeigt wird:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class="alert alert-danger">
This is an example message...
</div>


<script type="text/javascript">

$(document).ready(function () {
 
window.setTimeout(function() {
    $(".alert").fadeTo(1000, 0).slideUp(1000, function(){
        $(this).remove(); 
    });
}, 5000);
 
});
</script>

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

Wo fadeTo-Parameter fadeTo sind (Geschwindigkeit, Deckkraft)

Tigger bei Bedarf automatisch und manuell

$(function () {
    TriggerAlertClose();
});

function TriggerAlertClose() {
    window.setTimeout(function () {
        $(".alert").fadeTo(1000, 0).slideUp(1000, function () {
            $(this).remove();
        });
    }, 5000);
}

Dies ist ein guter Ansatz, um Animationen mit jQuery ein- und auszublenden

  $(document).ready(function() {
      // show the alert
      $(".alert").first().hide().slideDown(500).delay(4000).slideUp(500, function () {
         $(this).remove(); 
      });
  });

C # -Controller:

var result = await _roleManager.CreateAsync(identityRole);
   if (result.Succeeded == true)
       TempData["roleCreateAlert"] = "Added record successfully";

Rasiermesserseite:

@if (TempData["roleCreateAlert"] != null)
{
    <div class="alert alert-success">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
        <p>@TempData["roleCreateAlert"]</p>
    </div>
}

Beliebige automatische Schließung von Warnungen:

<script type="text/javascript">
    $(".alert").delay(5000).slideUp(200, function () {
        $(this).alert('close');
    });
</script>