jQuery "Uncaught TypeError: undefined is not a function" when using fadeIn();

Question

I am new to JS and I am writing a basic jQuery-rich webpage with fade-in/fade-out for each page in the same document (using the same div element with separate IDs). Anyway, when I try to fade in the current page, I receive the error "Uncaught TypeError: undefined is not a function", I've had a search around online but couldn't find a solution.

The HTML is loaded before the script and the full jQuery library has been included in the header of the page.

The div element I am targeting has "display: none;" set in my CSS.

HTML

<div class="page_content" id="page_home">
Content removed
</div>

JS:

<script>

var cp = "page_home";
var tp = document.getElementById(cp);
tp.fadeIn('slow');

</script>

Anyone experienced anything similar and have a solution? I'm sure it's something simple, since my code is anyway...

Rajaprabhu Aravindasamy · Accepted Answer · 2014-07-04 11:53:42Z

4

tp is a plain javascript object and it does not has a function called .fadeIn()

Try to wrap it inside $() to make it a jquery object then do,

$(tp).fadeIn('slow');

or better use jquery's id selector to grab the element,

$("#page_home").fadeIn('slow');

answered Jul 4, 2014 at 11:53

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

SigmaDanny Over a year ago

Works perfectly now! Thank you, it seems so obvious now I look at it, I knew to use that when selecting an ID or Class anyway, I didn't think it was required since the variable was set to the targeted ID element already.

Rajaprabhu Aravindasamy Over a year ago

@user3805361 Glad to help..! and by the way, if you think that anyone of the answers here has satisfied your need then try to accept it by clicking on the tick mark present inside it.. And it is not a compulsion.. :)

SigmaDanny Over a year ago

Yes, I was waiting for the 10 minutes, so it would let me accept yours since it was the most detailed and you replied first.

Anoop Joshi P · Accepted Answer · 2014-07-04 11:54:12Z

3

Because tp is not a jquery object, it will not have the methods related to jquery.

Use,

$("#page_home").fadeIn('slow');

answered Jul 4, 2014 at 11:54

Anoop Joshi P

25.6k9 gold badges35 silver badges54 bronze badges

Collectives™ on Stack Overflow

jQuery "Uncaught TypeError: undefined is not a function" when using fadeIn();

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related