How do I get my page to load the jQuery UI Effects library?

Question

I'm using javascript for the first time to do some simple animations on the home page of my website. So far I have added the following to my header.php file (which is only used for my home page), before the wp_head line.

<?php
function my_scripts_method() {
    wp_enqueue_script('jquery');            
}    

add_action('wp_enqueue_scripts', 'my_scripts_method'); // For use on the Front end (ie. Theme)
?>

It's loading jquery into my page! I only need it on the home page, which is why I'm not calling it in functions.php or whatever.

I just need to do some simple animations on my home page and need some advice. When the page loads, I want the logo to move down into position from off the top of the page, then I want the menu to appear underneath it using the Blind effect. When someone clicks a menu item I need the menu to hide using the blind effect, the background colour to change, the logo to move, and the logo to be transitioned from one png to another png (so that it appears to change color as well).

The codex (http://codex.wordpress.org/Function_Reference/wp_enqueue_script) says jQuery UI Effects is NOT included with the jquery-ui-core.

How do I get my page to load the jQuery UI Effects library?

Alternately, perhaps someone can offer advice on a better js file to use for this than jQuery UI Effects?

Answer 1

You can call scripts in your function to only load for the front or home page. The codex is not a very complete reference, to include the jQuery UI Effects core you can do the following:

wp_enqueue_script( 'jquery-effects-core');

Or you can iclude just the effects you want , such as:

 wp_enqueue_script( 'jquery-effects-blind');

Here is a reference to the jQuery effects names which you can enqueue:

• jquery-effects-core
• jquery-effects-blind
• jquery-effects-bounce
• jquery-effects-clip
• jquery-effects-drop
• jquery-effects-explode
• jquery-effects-fade
• jquery-effects-fold
• jquery-effects-highlight
• jquery-effects-pulsate
• jquery-effects-scale
• jquery-effects-shake
• jquery-effects-slide
• jquery-effects-transfer

To include it only for your font page you would do something like:

function my_scripts_method() {
    if ( is_front_page ) { 
    // make sure jQuery is loaded
    wp_enqueue_script('jquery-ui-core', '', '', array('jquery'));
    wp_enqueue_script('jquery-effects-core', '', '', array('jquery'));
    }
}
add_action('wp_enqueue_scripts', 'my_scripts_method');