Alert automatyczny Auto Close

Question

Moja potrzeba to wywołanie alertu po kliknięciu przycisku Dodaj do listy życzeń i powinien zniknąć z alertu w ciągu 2 sekund. Tak właśnie próbowałem, ale alarm natychmiast znika, gdy tylko się pojawi. Nie jestem pewien, gdzie jest błąd. Czy ktoś może mi pomóc?

JS Script

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

HTML kod:

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

Alert Box:

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

Answer 1

Na gładkiej slideUp:

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

Fiddle

Answer 2

Korzystanie z fadeTo() że zanika do nieprzejrzystości 500 w 2 sekundy w „I Can Has Kittenz” kod "s nie jest czytelny dla mnie. Myślę, że to lepiej przy użyciu innych opcji, takich jak opóźnienie()

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

Answer 3

I okazało się, że lepszym rozwiązaniem

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

Answer 4

Dlaczego wszystkie inne odpowiedzi używać slideUp jest tuż za mną. Ponieważ używam klas fade i in, aby alert znikał po zamknięciu (lub po przekroczeniu limitu czasu), nie chcę, aby się "wysunął" i był z nim w konflikcie.

Poza metodą slideUp nawet nie działała. Sam alert nie pokazał się wcale. Oto, co doskonale pracował dla mnie:

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

Answer 5

jedno rozwiązanie tego automatycznie zamknie lub zanikać komunikat alertu bootstrap po 5 sekundach:

Jest to kod HTML służy do wyświetlania wiadomości:

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

JS Fragment

<script type="text/javascript"> 
 

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

Answer 6

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

Jeżeli parametry fadeTo są fadeTo (prędkość, przezroczystość)