jQuery autohide element after 5 seconds

Question

Is it possible to automatically hide an element in a web page 5 seconds after the form loads using jQuery?

Basically, I've got

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

that I'd like to disappear after 5 seconds. I've looked at jQuery UI and the hide effect but I'm having a little trouble getting it work the way I want it to.

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

                var selectedEffect = 'blind';

                var options = {};

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

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

I'd like the click function to be removed and add a timeout method that calls the runEffect() after 5 seconds.

score 235 · Answer 1 · edited Jul 08 '12 at 12:50

235

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

edited Jul 08 '12 at 12:50

answered Nov 05 '10 at 19:39

justmeol

2,351
1
13
2

2

Be warned that this solution breaks $('html').click(function() { //click outside $("#selector").fadeOut(); }); – max4ever Mar 21 '13 at 14:02
Thanks for this simple solution. – Ron Jun 23 '15 at 15:12
Thank you very simple solution! – Ana DEV Aug 06 '15 at 05:35

Konstantin Tarkus · Accepted Answer · 2009-03-28T16:49:13.763

123

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

Note: In order to make you jQuery function work inside setTimeout you should wrap it inside

function() { ... }

edited Mar 28 '09 at 16:49

answered Mar 25 '09 at 20:45

Konstantin Tarkus

37,618
14
135
121

1

I tried this code on my website. But, it didn't work. Other than this js script, what else do i need to make it work? Please advice! Thank you! – Jornes Nov 17 '15 at 17:08
1

@Jornes make sure that this script is located after `` on your page. – Konstantin Tarkus Nov 18 '15 at 20:24

score 13 · Answer 3 · edited May 25 '16 at 10:43

13

You can try :

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

If you used this then your div will be hide after 30 sec.I also tried this one and it worked for me.

edited May 25 '16 at 10:43

Ikhlak S.

8,578
10
57
77

answered Jul 02 '15 at 06:09

sweety

318
1
3
8

score 7 · Answer 4 · answered Nov 07 '17 at 21:04

Please note you may need to display div text again after it has disappeared. So you will need to also empty and then re-show the element at some point.

You can do this with 1 line of code:

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

If you're using jQuery you don't need setTimeout, at least not to autohide an element.

score 3 · Answer 5 · answered Jan 29 '14 at 09:04

3

I think, you could also do something like...

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

and do your animated effects on the event-click...

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

Greetings,

answered Jan 29 '14 at 09:04

Petertje

39
3

score 2 · Answer 6 · answered Mar 26 '19 at 03:40

2

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

answered Mar 26 '19 at 03:40

sushilyogi

31
2

score 2 · Answer 7 · answered Mar 25 '09 at 20:59

2

You use setTimeout on you runEffect function :

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

answered Mar 25 '09 at 20:59

Christian C. Salvadó

807,428
183
922
838

score 1 · Answer 8 · answered Jul 05 '17 at 11:41

1

This is how you can set the timeout after you click.

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

//5000 = 5sec = 5000 milisec

answered Jul 05 '17 at 11:41

Aakash Pahuja

469
4
10

jQuery autohide element after 5 seconds

8 Answers8

Linked