jQuery-Element nach 5 Sekunden automatisch ausblenden

92

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.

jquery jquery-ui

— Chris Conway
quelle

115

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

— Konstantin Tarkus
quelle

1

Ich habe diesen Code auf meiner Website ausprobiert. Aber es hat nicht funktioniert. Was brauche ich außer diesem JS-Skript noch, damit es funktioniert? Bitte beraten! Danke dir!

— Jornes

1

@Jornes stellen Sie sicher, dass sich dieses Skript <script src="jquery.js"></script>auf Ihrer Seite befindet.

— Konstantin Tarkus

217

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

— Justmeol
quelle

2

Seien Sie gewarnt, dass diese Lösung $ ('html') bricht. Click (function () {// außerhalb von $ klicken ("# selector"). FadeOut ();});

— Max4ever

Vielen Dank für diese einfache Lösung.

— Ron

Vielen Dank sehr einfache Lösung!

— Anahit DEV

9

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.

— Schätzchen
quelle

3

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.

— Krise
quelle

1

Sie verwenden setTimeout für Ihre runEffect-Funktion:

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

— CMS
quelle

1

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,

— Petertje
quelle

1

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

— user3778023
quelle

0

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

— Aakash Pahuja
quelle