Element autohide jQuery po 5 sekundach

Czy możliwe jest automatyczne ukrycie elementu na stronie WWW 5 sekund po załadowaniu formularza przy użyciu jQuery?

Zasadniczo mam

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

że chciałbym zniknąć po 5 sekundach. Przyjrzałem się interfejsowi użytkownika jQuery i efektowi ukrywania, ale mam mały problem z wykonaniem go tak, jak chcę.

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

                var selectedEffect = 'blind';

                var options = {};

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

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

Chciałbym usunąć funkcję click i dodać metodę timeout, która wywoła runEffect () po 5 sekundach.

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

Uwaga : aby funkcja jQuery działała wewnątrz setTimeout, należy ją opakować

function() { ... }

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

Możesz spróbować :

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

Jeśli tego użyłeś, twój div zostanie ukryty po 30 sekundach. Próbowałem też tego i zadziałało.

Pamiętaj, że może być konieczne ponowne wyświetlenie tekstu div po jego zniknięciu. W pewnym momencie będziesz musiał również opróżnić, a następnie ponownie wyświetlić element.

Możesz to zrobić za pomocą 1 linii kodu:

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

Jeśli używasz jQuery, nie potrzebujesz setTimeout, przynajmniej nie chcesz automatycznie ukrywać elementu.

Używasz setTimeout na swojej funkcji runEffect:

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

Myślę, że możesz też zrobić coś takiego ...

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

i zrób swoje animowane efekty na wydarzeniu-kliknij ...

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

Pozdrowienia,

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

W ten sposób możesz ustawić limit czasu po kliknięciu.

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

// 5000 = 5s = 5000 milisek