Peringatan Bootstrap Tutup Otomatis

Kebutuhan saya adalah untuk memanggil peringatan ketika saya mengklik tombol Tambahkan ke Wishlist dan harus menghilangkan peringatan dalam 2 detik. Ini adalah cara saya mencoba, tetapi peringatan menghilang segera setelah muncul. Tidak yakin, di mana bug itu berada ... Adakah yang bisa membantu saya?

Script JS

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

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

Kotak Peringatan:

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

Untuk slideup yang lancar:

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

Menggunakan fadeTo()kode yang memudar menjadi opacity 500 dalam 2 detik dalam kode "I Can Has Kittenz" tidak dapat dibaca oleh saya. Saya pikir lebih baik menggunakan opsi lain seperti penundaan ()

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

Mengapa semua jawaban lain digunakan slideUphanya di luar saya. Karena saya menggunakan fadedan inkelas untuk memiliki peringatan memudar ketika ditutup (atau setelah batas waktu), saya tidak ingin itu "meluncur" dan bertentangan dengan itu.

Lagipula slideUpmetodenya bahkan tidak berhasil. Lansiran itu sendiri tidak muncul sama sekali. Inilah yang bekerja dengan baik untuk saya:

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

Saya menemukan ini menjadi solusi yang lebih baik

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

satu lagi solusi untuk ini Secara otomatis menutup atau memudar pesan peringatan bootstrap setelah 5 detik:

Ini adalah kode HTML yang digunakan untuk menampilkan pesan:

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

Di mana parameter fadeTo adalah fadeTo (kecepatan, opacity)

Tiggers secara otomatis dan manual bila diperlukan

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

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

Ini adalah pendekatan yang baik untuk menampilkan animasi masuk dan keluar menggunakan jQuery

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

Halaman Cukur:

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

Peringatan Otomatis Tutup:

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