jQuery not linking properly to HTML file

Question

When I loaded my HTML, I keep getting an error message stating that (function) is not a function. What's going on here? Here's how I have included my scripts and the jQuery itself.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
crossorigin="anonymous"></script>
<script src="js/script.js"></script>

var $title = $('#intro h1'); 
$title.hide().fadeIn();

The issue is because you're using jQuery slim, which has most animation methods removed. Use the full jQuery version instead. It has nothing to do with 'jQuery' not being linked correctly. — Rory McCrossan, Jun 14 '18 at 11:01
Possible duplicate of [jQuery - "fadeIn is not a function"](https://stackoverflow.com/questions/45645772/jquery-fadein-is-not-a-function) — Krzysztof Janiszewski, Jun 14 '18 at 11:07

score 1 · Answer 1 · answered Jun 14 '18 at 11:08

That is beacuse you use "slim" version of jQuery which doesn't include many functions.

There is simply no function called fadeIn.

...jquery-3.2.1.slim.min.js"...

var $title = $('#intro h1'); 
$title.hide().fadeIn();

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
crossorigin="anonymous"></script>

<div id="intro"><h1>Hello world</h1></div>

Just use full version

var $title = $('#intro h1'); 
$title.hide().fadeIn();

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<div id="intro"><h1>Hello world</h1></div>

jQuery not linking properly to HTML file

1 Answers1