jQuery-Element nach 5 Sekunden automatisch ausblenden

Ist es möglich, ein Element auf einer Webseite 5 Sekunden nach dem Laden des Formulars mithilfe von jQuery automatisch auszublenden?

Grundsätzlich habe ich

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

dass ich nach 5 Sekunden verschwinden möchte. Ich habe mir die jQuery-Benutzeroberfläche und den Hide-Effekt angesehen, aber ich habe ein wenig Probleme damit, dass es so funktioniert, wie ich es möchte.

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

                var selectedEffect = 'blind';

                var options = {};

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

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

Ich möchte, dass die Klickfunktion entfernt wird und eine Timeout-Methode hinzugefügt wird, die runEffect () nach 5 Sekunden aufruft.

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

Hinweis : Damit Ihre jQuery-Funktion in setTimeout funktioniert, sollten Sie sie einschließen

function() { ... }

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

Du kannst es versuchen :

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

Wenn Sie dies verwendet haben, wird Ihr Div nach 30 Sekunden ausgeblendet. Ich habe es auch versucht und es hat bei mir funktioniert.

Bitte beachten Sie, dass Sie möglicherweise div-Text erneut anzeigen müssen, nachdem er verschwunden ist. Sie müssen das Element also auch leeren und dann irgendwann erneut anzeigen.

Sie können dies mit 1 Codezeile tun:

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

Wenn Sie jQuery verwenden, benötigen Sie setTimeout nicht, um ein Element zumindest nicht automatisch auszublenden.

Sie verwenden setTimeout für Ihre runEffect-Funktion:

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

Ich denke, du könntest auch so etwas wie ...

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

und mache deine animierten Effekte auf dem Event-Klick ...

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

Schöne Grüße,

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

Auf diese Weise können Sie das Zeitlimit festlegen, nachdem Sie auf geklickt haben.

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

// 5000 = 5 s = 5000 milisec