Why does jQuery throw the error `fadeOut is not a function'?

Question

I am using jQuery and put this code in my javascript:

function HideMe(itemID) {
    var myDiv = \'item_\' + itemID;
    $(myDiv).fadeOut(\"slow\");
}
         


        

Answer 1

You have liDiv instead of myDiv. Try:

function HideMe(itemID) {
    var myDiv = 'item_' + itemID;
    $(myDiv).fadeOut("slow");
}

Answer 2

On moving a .html template to a wordpress one, I found this popping up regularly.

Two reasons, and the console error can be deceptive:

1. The error in the console can send you down the wrong path. It MIGHT not be the real issue. First reason for me was the order in which you have set your .js files to load. In html easy, put them in the same order as the theme template. In Wordpress, you need to enqueue them in the right order, but also set a priority if they don't appear in the right order,

2. Second thing is are the .js files in the header or the footer. Moving them to the footer can solve the issue - it did for me, after a day of trying to debug the issue. Usually doesn't matter, but for a complex page with lots of js libraries, it might!

Answer 3

This will happen if you're using the "slim" version of jQuery. Only the "full" version of jQuery includes animation effects.

Try grabbing the "full" version of jQuery from the jQuery downloads page and including that in your page (or including a full version of jQuery from a CDN from your page).

Answer 4

Do you have another javascript library on that page? It seems you have the hide function, and the $ defined (prototype, for example, also has an hide function).
If that is the case, try:

jQuery("#item_0").fadeOut("slow");