jQuery bounce effect not working on list items like they should. Why?

Question

I've looked high and low, and tried all sorts of things, but it simply won't work. I saw these two SO questions and their responses (which apparently worked) but do not seem to be working for me:

jquery bounce effect breaks inline alignment of list

jQuery Bounce In Place

I want to make the list items on my website http://web.cs.dal.ca/~webucat/ bounce when clicked on. This is my HTML:

            <div id = "links">
                <ul>
                    <li><a href ="index.html" class="tab">Home</a><li>
                    <li><a href ="math.html" class="tab">Learn Math</a><li>
                    <li><a href ="geography.html" class="tab">Learn Geography</a><li>
                    <li><a href ="spelling.html" class="tab">Learn Spelling</a><li>
                    <li><a href ="music.html" class="tab">Learn Music</a><li>
                    <li><a href ="contact.html" class="tab">Contact Teacher</a><li>
                </ul>
            </div>

And my jQuery:

$('li a').hover(function () {
    $(this).effect("bounce", { times: 3 }, 300);
})​

But they don't seem to work.

In one of the previous questions it said to make the list items float left instead of display inline, which I did, but it still didn't fix the issue.

I have an odd feeling it's something to do with my script references in my HTML. Are these correctly done?

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
    <script type="text/javascript" src="javascript/jquery-1.6.3.min.js"></script>
    <script type="text/javascript" src="javascript/scripts.js"></script>

I'm really at a loss here as to why it won't work. Could anyone help?

Edit: I made this fiddle: http://jsfiddle.net/jfHNU/2/ And it works there, and I fail to see how my code is different from that.

Answer 1

You must include jQuery-ui after jQuery otherwise nothing will work

<script type="text/javascript" src="javascript/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
<script type="text/javascript" src="javascript/scripts.js"></script>

Answer 2

When is

$('li a').hover(function () {
    $(this).effect("bounce", { times: 3 }, 300);
})​

being executed? Is it perhaps running before the dom is fully loaded and therefor the li's don't exist?

edit: It looks like it's running before the page is fully loaded. try moving your script tag to the bottom of the page and perhaps wrapping it in a document.ready ie:

$(document).ready(function() {
  $('li a').hover(function () {
    $(this).effect("bounce", { times: 3 }, 300);
  })​
});