Question

I get the error shown below (73TypeError) on a small background animation script when included in the header of a WordPress theme, which breaks the script. I don’t see any error when the script is included on non-Wordpress page:

Here is the script:

$(function() {
   $(".bottom").hover( function () {
      $(this).animate( {
         backgroundPosition : '0px 35px'}
      , 300); }
   , function () {
      $(this).animate( {
         backgroundPosition : '0px 0px'}
      , 600); }
   ); 
   }
);

Could someone advise at what is causing this error?

Thanks,

Nick

Answer 1

Fist off in wordpress, jQuery should be loaded with no-COnflict. So in this case your file should be;

var $j = jQuery.noConflict();

$j(function() {
   $j(".bottom").hover( function () {
      $j(this).animate( {
         backgroundPosition : '0px 35px'}
      , 300); }
   , function () {
      $j(this).animate( {
         backgroundPosition : '0px 0px'}
      , 600); }
   ); 
   }
);

and secondly, like undefined mentioned, you need to load your jQuery using wp-enqueue-script();

To accomplish this, for best practices, place your jQuery on a separate file. call it for example bganimation.js

now to load that js file in wordpress, use wp-enqueue-script(); like this.

function this_is_jquery_example(){
wp_enqueue_script( 'jquery' );;
wp_enqueue_script('myscript', plugin_dir_url(__FILE__) .' bganimation.js');

}
add_action('wp_enqueue_scripts','this_is_jquery_example');

hope this helps.