jQuery autohide element after 5 seconds

Chris Conway picture Chris Conway · Mar 25, 2009 · Viewed 228.7k times · Source

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.

Answer

justmeol picture justmeol · Nov 5, 2010
$('#selector').delay(5000).fadeOut('slow');