CODEWITHSUNDEEP
javascriptjqueryhtmljquery-ui
A5TR0
A5TR0

Reputation: 37

Loaded jQuery UI library but getting "Uncaught TypeError: $(...).effect is not a function"

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!

Upvotes: 2

Views: 4391

Answers (2)

raduation
raduation

Reputation: 792

Try defining jquery before jquery-ui.

Upvotes: 0

taxicala
taxicala

Reputation: 21789

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>

Upvotes: 1

Related Questions