在Wordpress中的x秒后隐藏div

Question

I would like to hide a picture in a div after 10 seconds using Javascript. The div i have is in the footer.php along with the script I researched to hide but it is not working. Any ideas?? Below is a snippet of my code.

<--footer.php-->

<div id="hide">
    <img src="http://www.example.com/image.png">
</div>


<script type="text/javascript">
   setTimeout(function() {
   $('#hide').hide();
}, 10000);
</script>

<--footer.php-->

Do i need to have something in my stylesheet.css to reference the #hide???

Thanks in advance. Paul

Answer 1

You code is correct and should work if you have also included a jQuery library.

For example:

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

Answer 2

Be sure that you include jquery properly:

http://digwp.com/2009/06/including-jquery-in-wordpress-the-right-way/

How do I add a simple jQuery script to WordPress?

http://www.ericmmartin.com/5-tips-for-using-jquery-with-wordpress/

use jQuery() instead of $() in wordpress environment. or you can:

jQuery(function($){
  setTimeout(function() {
    $('#hide').hide();},
  10000); 
});

and No, you dont need to have something in stylesheet that refer to the div

good luck !