jQuery autohide elemen setelah 5 detik

Apakah mungkin untuk secara otomatis menyembunyikan elemen di halaman web 5 detik setelah formulir dimuat menggunakan jQuery?

Pada dasarnya, saya mengerti

<div id="successMessage">Project saved successfully!</div>

bahwa saya ingin menghilang setelah 5 detik. Saya telah melihat jQuery UI dan efek sembunyikan tetapi saya mengalami sedikit kesulitan untuk membuatnya berfungsi seperti yang saya inginkan.

<script type="text/javascript">
        $(function() {
            function runEffect() {

                var selectedEffect = 'blind';

                var options = {};

                $("#successMessage").hide(selectedEffect, options, 500);
            };

            $("#successMessage").click(function() {
                runEffect();
                return false;
            });
        });
    </script>

Saya ingin fungsi klik dihapus dan menambahkan metode batas waktu yang memanggil runEffect () setelah 5 detik.

$(function() {
    // setTimeout() function will be fired after page is loaded
    // it will wait for 5 sec. and then will fire
    // $("#successMessage").hide() function
    setTimeout(function() {
        $("#successMessage").hide('blind', {}, 500)
    }, 5000);
});

Catatan : Untuk membuat fungsi jQuery Anda berfungsi di dalam setTimeout, Anda harus membungkusnya di dalamnya

function() { ... }

$('#selector').delay(5000).fadeOut('slow');

Anda dapat mencoba :

setTimeout(function() {
  $('#successMessage').fadeOut('fast');
}, 30000); // <-- time in milliseconds

Jika Anda menggunakan ini maka div Anda akan disembunyikan setelah 30 detik. Saya juga mencoba yang ini dan berhasil untuk saya.

Harap dicatat Anda mungkin perlu menampilkan teks div lagi setelah hilang. Jadi, Anda juga perlu mengosongkan dan menampilkan kembali elemen tersebut di beberapa titik.

Anda dapat melakukan ini dengan 1 baris kode:

$('#element_id').empty().show().html(message).delay(3000).fadeOut(300);

Jika Anda menggunakan jQuery, Anda tidak memerlukan setTimeout, setidaknya untuk tidak menyembunyikan elemen secara otomatis.

Anda menggunakan setTimeout saat Anda menjalankan fungsi runEffect:

function runEffect() {
    setTimeout(function(){
        var selectedEffect = 'blind';
        var options = {};
        $("#successMessage").hide(selectedEffect, options, 500)
     }, 5000);
}

Saya pikir, Anda juga bisa melakukan sesuatu seperti ...

setTimeout(function(){
    $(".message-class").trigger("click");
}, 5000);

dan lakukan efek animasi Anda pada event-click ...

$(".message-class").click(function() {
    //your event-code
});

Salam pembuka,

jQuery (". success_mgs"). show (); setTimeout (function () {jQuery (". success_mgs"). hide ();}, 5000);

Inilah cara Anda menyetel waktu tunggu setelah Anda mengeklik.

$(".selectorOnWhichEventCapture").on('click', function() {
    setTimeout(function(){
        $(".selector").doWhateverYouWantToDo();
    }, 5000);
});

// 5000 = 5sec = 5000 milidetik