jquery not working with wordpress?

Question

Script is actually quite simple:

jQuery(document).ready(function()
{
    setTimeout( function()
    {
        jQuery('.menu-header').fadeOut();
    }, 2000);
});

And should show menu after everything is loaded... And it works! But not with wordpress.. Also I know, that we should use jQuery insted of $. In my functions.php I add jquery:

add_action( 'wp_enqueue_script', 'load_jquery' );
function load_jquery() 
{
    wp_enqueue_script( 'jquery' );
}

But this script is not working at all...

Any suggestions?

Answer 1

I think this reads easier...

     <?php
     function custom_load_jquery() {
     ?>
     <script type="text/javascript">
          jQuery(document).ready(function(){
               setTimeout(function(){
                    jQuery('.menu-header').fadeOut(2000);
               }
          });
     </script>
     <?php
     }

     add_action( 'wp_enqueue_script', 'custom_load_jquery' );
     ?>

and wp_enqueue_script should be the correct place to load up the jQuery code... I'm not totally sure "load_jquery" isn't already in use, better to customize it. Also, do you have the fadeOut function correct? Check my recent edit...

Answer 2

Your script is not running in no Conflict mode.

The jQuery library included with WordPress is set to the noConflict() mode (see wp-includes/js/jquery/jquery.js). This is to prevent compatibility problems with other JavaScript libraries that WordPress can link.

In the noConflict() mode, the global $ shortcut for jQuery is not available.

Solution :

var $j = jQuery;

$j(document).ready(function(){
setTimeout(function(){
    $j('.menu-header').fadeOut();}, 2000);
});

Working jsfiddle

http://jsfiddle.net/dy5Mu/

Answer 3

If anyone will have a similar problem as mine, there is solution. All others said true. Thing is jQuery has been add later, then I call script. So... add code to the footer.php and it will be fine :D

Without any modifications at header or functions, just add to footer.php this:

jQuery(document).ready(function(){
    setTimeout(function(){
    jQuery('.menu-header').fadeIn();}, 3000);
});

However, I would like to say thank you all who tryied to help me. This forum is the best, and all of you are amazing!

Thank you!