How to hide a div after some time period?

jquery html fadeout

134,627

Solution 1

Here's a complete working example based on your testing. Compare it to what you have currently to figure out where you are going wrong.

<html> 
  <head> 
    <title>Untitled Document</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript"> 
      $(document).ready( function() {
        $('#deletesuccess').delay(1000).fadeOut();
      });
    </script>
  </head> 
  <body> 
    <div id=deletesuccess > hiiiiiiiiiii </div> 
  </body> 
</html>

Solution 2

In older versions of jquery you'll have to do it the "javascript way" using settimeout

setTimeout( function(){$('div').hide();} , 4000);

setTimeout( "$('div').hide();", 4000);

Recently with jquery 1.4 this solution has been added:

$("div").delay(4000).hide();

Of course replace "div" by the correct element using a valid jquery selector and call the function when the document is ready.

Solution 3

setTimeout('$("#someDivId").hide()',1500);

Solution 4

$().ready(function(){

  $('div.alert').delay(1500);
   $('div.alert').hide(1000);
});

div.alert{
color: green;
background-color: rgb(50,200,50, .5);
padding: 10px;
text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="alert"><p>Inserted Successfully . . .</p></div>

Solution 5

You can also use...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script type="text/javascript">
        $(function(){
           setTimeout(function(){
               $(".signup-success").fadeOut(1500);}, 5000);
        });
</script>

View more solutions

134,627

Author by

rag

Updated on July 18, 2022

Comments

rag almost 2 years

I need to hide a div (like "mail sent successful" in Gmail) after a certain time period when I reload the page.

How can I do that?
Jacob Relkin about 14 years

Reason being, the setTimeout function expects as it's first parameter either a function, or a string. You are providing neither, you are EXECUTING the function, and the return of that function is what you are sending to the setTimeout function. This will work if you pass the function itself, like this: setTimeout( $( "#div" ).hide, 4000 );.
marcgg about 14 years

@jacob: edited my answer, I think the examples I give should work fine
Jacob Relkin about 14 years

Not to mention that passing a string is way less efficient than passing a function because it causes the exec function to parse the function.
rag about 14 years

<html > <head> <title>Untitled Document</title> <script type="text/javascript"> $('#deletesuccess').delay(1000).fadeOut(); </script> </head> <body> <div id=deletesucess > hiiiiiiiiiii </div> </body> </html> i have tried this code but not working?pls tell wot is pblm for this code....
marcgg about 14 years

@jacob true about the exec part. I doubt it would make a big difference in the end... because if we start like that we could argue that defining the function on the fly like that takes more bits and would be longer to load. I'd say perf are not an issue here, so it's up to the OP to use whatever syntax he likes more (even though i'd recommend using function()... )
Kobi about 14 years

@rag - for one, you don't load jQuery there.
marcgg about 14 years

@rag also you don't load jquery as @kobi mentionned
rag about 14 years

<html> <head> <title>Untitled Document</title> <script type="text/javascript" src="jquery-1.3.2.min.js"> </script> <script type="text/javascript"> $('#deletesuccess').delay(1000).fadeOut(); </script> </head> <body> <div id=deletesucess > hiiiiiiiiiii </div> </body> </html> i have included kobi still it s not wrking..
rosscj2533 about 14 years

@rag: You have a typo: deletesuccess in selector but deletesucess in id.
marcgg about 14 years

@rag: check your syntax, typos and so on. respect valid xhtml and so on, also
rag about 14 years

Uncaught SyntaxError: Unexpected identifier /jqury/jquery-1.4.2.min.js:77 timehidediv.php:8Uncaught ReferenceError: $ is not defined / these are the new errors when i tried jquery 1.4.2
rag about 14 years

u der marcgg? forgot me if am late..:)
rag about 14 years

<html> <head> <title>Untitled Document</title> <script type="text/javascript" src="jquery-1.4.2.min.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $('#deletesucess').delay(1000).fadeOut(); }); //setTimeout('$("#deletesucess").hide()',1500); </script> </head> <body> <div id="deletesucess" > hiiiiiiiiiii </div> </body> </html> tried it in document ready still failed...
Pekka about 14 years

@ross and @marcgg, fyi, your dismal level of service (shame on you, no reaction for 20 minutes!!!) left the OP no choice but to ask the same question again : stackoverflow.com/questions/2426659/…
marcgg about 14 years

@rag: you have a problem with your jquery if it doesn't even recognize $. Try downloading it again and please don't open duplicate questions. Check your div ids and so on.
Pekka about 14 years

@rag looks like your jquery is broken, as @marc says download it again.