40

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

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

But its giving me this error: fadeOut is not a function.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
Marc V
  • 705
  • 1
  • 8
  • 18

10 Answers10

167

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).

Jon Schneider
  • 25,758
  • 23
  • 142
  • 170
24

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");
Kobi
  • 135,331
  • 41
  • 252
  • 292
  • 24
    Mostly the "another javascript library" is the slim version of jQuery itself which does not include animation effects. – Sunil Kumar Oct 03 '18 at 11:12
  • 9
    @SunilKumar - The [slim version was release in 2016](https://blog.jquery.com/2016/09/22/jquery-3-1-1-released/) - 7 years after this answer! – Kobi Oct 03 '18 at 12:10
  • 1
    @Kobi That doesn't mean it isn't a reason why people are still arriving at this page. Sunil's comment helped me. – Martin Greenaway Mar 20 '20 at 10:09
  • 2
    @Martin - Sure! It's a good thing there's also another answer that explains that, so we don't need to answer this one. – Kobi Mar 20 '20 at 14:54
21

I had this error because I was using a slim version of jQuery. If you download the full version you should be okay.

Martin Tournoij
  • 26,737
  • 24
  • 105
  • 146
rychrist88
  • 643
  • 6
  • 14
4

Even if the selector didn't return any items in the collection the function call would have worked (not generated this error anyway) if jQuery was loaded correctly. Either there is a conflict in the page, or it didn't load at all. You can try 

jQuery(myDiv).fadeOut("slow");

or look into why jQuery hasn't been loaded.

P.S.: don't forget the # in the selector if selecting by id.

cgp
  • 41,026
  • 12
  • 101
  • 131
  • How can i check that jQuery is loaded or not. I am able to use $(myDiv).hide(); function perfectly. but not fadeOut – Marc V Jun 01 '09 at 11:57
3

It happened to me because of slim version of Jquery library. Full version of Jquery library includes animation.

Jquery CDN available at https://code.jquery.com/

S.Pradeep
  • 487
  • 1
  • 5
  • 16
3

Also, you probably forgot a # in the selector (unless you've got something like <item_1 /> in the markup).

var myDiv = '#item_' + itemID;

jQuery uses CSS selectors to search for elements, so without the #, you'd get every element with the tag item_x instead of the ID.

moff
  • 6,415
  • 31
  • 30
  • Doesn't matter though, this error doesn't pop up if jQuery is loaded correctly. – cgp Jun 01 '09 at 11:41
  • You're absolutely right, I just posted this if it *still* didn't work. I thought the variable naming was the problem, though I now see I was wrong. – moff Jun 01 '09 at 11:45
2

It looks like jquery is not correctly attached to the page.

Check your linking to jQuery.

Mesh
  • 6,262
  • 5
  • 34
  • 53
  • It's attached because I am able to use $(myDiv).hide(); function perfectly – Marc V Jun 01 '09 at 11:38
  • You are linking to jQuery in the Head section? Are you using another javascript library that also uses the $ character as an identifier? ( OpenLayers is one such library) – Mesh Jun 01 '09 at 12:02
2

Try keeping it inside 

$(document).ready(function(){
// your code. and don't forget the '#' in front of item.
});

Looks like you're trying to call the function before jQuery / the DOM loads.

Sudhir Jonathan
  • 16,998
  • 13
  • 66
  • 90
1

You have liDiv instead of myDiv. Try:

function HideMe(itemID) {
    var myDiv = 'item_' + itemID;
    $(myDiv).fadeOut("slow");
}
Tomas Aschan
  • 58,548
  • 56
  • 243
  • 402
  • my mistake .....i used myDiv, but it was written wrong here, its not working using myDiv though. – Marc V Jun 01 '09 at 11:34
0

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!

Mark Zee
  • 11
  • 5