Fermeture automatique de l'alerte d'amorçage

Mon besoin est d'appeler l'alerte lorsque je clique sur le bouton Ajouter à la liste de souhaits et que l'alerte doit disparaître dans 2 secondes. C'est comme ça que j'ai essayé, mais l'alerte disparaît instantanément dès qu'elle apparaît. Je ne sais pas où se trouve le bogue. Quelqu'un peut-il m'aider?

Script JS

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

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

Boîte d'alerte:

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

Pour un glissement fluide:

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

Utiliser un fadeTo()qui s'estompe à une opacité de 500 en 2 secondes dans le code de "I Can Has Kittenz" ne m'est pas lisible. Je pense qu'il vaut mieux utiliser d'autres options comme un delay ()

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

La raison pour laquelle toutes les autres réponses utilisent slideUpest juste au-delà de moi. Comme j'utilise les classes fadeet inpour que l'alerte disparaisse lorsqu'elle est fermée (ou après l'expiration du délai), je ne veux pas qu'elle «glisse» et entre en conflit avec cela.

De plus, la slideUpméthode n'a même pas fonctionné. L'alerte elle-même ne s'affichait pas du tout. Voici ce qui a parfaitement fonctionné pour moi:

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

J'ai trouvé que c'était une meilleure solution

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

une autre solution pour cela Fermez ou disparaissez automatiquement le message d'alerte de bootstrap après 5 secondes:

Voici le code HTML utilisé pour afficher le message:

<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');
});

Où les paramètres fadeTo sont fadeTo (vitesse, opacité)

Tiggers automatiquement et manuellement en cas de besoin

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

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

C'est une bonne approche pour afficher l'animation à l'intérieur et à l'extérieur à l'aide de jQuery

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

Contrôleur C #:

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

Page de rasoir:

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

Toute fermeture automatique d'alerte:

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