Free the jQuery UI library but get & ldquo; Uncaught TypeError: $ (& hellip;). Effect is not a function & rdquo;

advertisements

Trying to make the #intro_title bounce when the document is ready. I loaded both the jQuery and jQuery UI libraries and I still get "Uncaught TypeError: $(...).effect is not a function". I suspect that this is an issue with importing the jQuery UI library so...

I tried loading the libraries at the end of the body, head, html, etc. and changed "src" to "href" but I get the same result each time. I even tried both Google's and jQuery's hosted libraries only to meet the same result.

lodge_101.html

<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="lodge_101_main.css">
<head>
    <title>Scipio Lodge 101</title>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>

    <h1 id="intro_title">WELCOME TO LODGE 101</h1>

<script src="lodge_101_main.js"></script>
</body>
</html>

lodge_101_main.js

$(document).ready(function() {
     $("#intro_title").effect("bounce", { times:3 }, "slow");
});

Why does this continue to happen and how can I fix it? I'm still new to programming so please be very critical of my work, thank you!


you have to load the jquery library before the jquery ui. just change your script tags position. move the jquery script tag at the first position.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>