jQuery tự động ẩn phần tử sau 5 giây

Có thể tự động ẩn một phần tử trong trang web 5 giây sau khi tải biểu mẫu bằng jQuery không?

Về cơ bản, tôi có

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

mà tôi muốn biến mất sau 5 giây. Tôi đã xem giao diện người dùng jQuery và hiệu ứng ẩn nhưng tôi gặp một chút khó khăn để làm cho nó hoạt động theo cách tôi muốn.

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

                var selectedEffect = 'blind';

                var options = {};

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

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

Tôi muốn loại bỏ chức năng nhấp chuột và thêm một phương thức thời gian chờ gọi runEffect () sau 5 giây.

$(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);
});

Lưu ý : Để hàm jQuery hoạt động bên trong setTimeout, bạn nên bọc nó bên trong

function() { ... }

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

Bạn co thể thử :

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

Nếu bạn sử dụng cái này thì div của bạn sẽ bị ẩn sau 30 giây. Tôi cũng đã thử cái này và nó hiệu quả với tôi.

Xin lưu ý rằng bạn có thể cần hiển thị lại văn bản div sau khi nó đã biến mất. Vì vậy, bạn cũng sẽ cần phải làm trống và sau đó hiển thị lại phần tử tại một số điểm.

Bạn có thể làm điều này với 1 dòng mã:

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

Nếu bạn đang sử dụng jQuery, bạn không cần setTimeout, ít nhất là không tự động ẩn một phần tử.

Bạn sử dụng setTimeout trên hàm runEffect:

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

Tôi nghĩ, bạn cũng có thể làm điều gì đó như ...

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

và thực hiện các hiệu ứng động của bạn khi nhấp vào sự kiện ...

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

Lời chào hỏi,

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

Đây là cách bạn có thể đặt thời gian chờ sau khi nhấp chuột.

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

// 5000 = 5sec = 5000 milisec