Why is my add class on hover working on Jsfiddle but not on my website? Am I missing something in my header?

Question

I am trying to add a class on hover to animate my class using keyframes. I have the whole thing working on jsfiddle but it doesn't add a class on my webite that has the exact same code. Do you need to include something in your header file to use javascript? Sorry if I sound like a huge noob. I am.

$(".sponsorDescription").hover(function () {
    $(this).toggleClass("fade");
});

http://jsfiddle.net/e27Dt/1/#&togetherjs=kEoBqL8yHd

Website http://www.theridgefarm.com/sponsors/

Answer 1

Are you using WordPress?

WordPress does funny things to jQuery, like invalidating the $ prefix. Try this:

jQuery(".sponsorDescription").hover(function () {
    jQuery(this).toggleClass("fade");
});

Answer 2

This is a self-executing, anonymous function that creates a closure where $ is set to jQuery. You can use it without worrying about the $ namespace polluting the global namespace and therefore not accidentally use the $ from some other library.

(function($) {

  $('.thing').method('set');

})(jQuery);

This is a general WP practice. You can also use jQuery( like @Okomikeruko said - but that can be tedious when writing it many times. If I'm not mistaken, I think it's also like a document.ready?

( ) means execute function/method "call" right?

and so, ( function() {} )();

( function($) {} )(jQuery);

Maybe this will help understanding the syntax. : )