jQuery-Bounce-Effekt funktioniert nicht auf Listenelementen, wie sie sollten. Warum?

Question

Ich habe hoch und niedrig geschaut, und habe alle möglichen Dinge ausprobiert, aber es wird einfach nicht funktionieren. Ich sah diese zwei SO Fragen und deren Antworten (die funktionierte anscheinend), aber anscheinend nicht für mich zu arbeiten:

jquery bounce effect breaks inline alignment of list

jQuery Bounce In Place

Ich möchte auf meiner Website http://web.cs.dal.ca/~webucat/ prallen die Listenelemente machen wenn angeklickt. Das ist mein 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> 

Und meine jQuery:

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

Aber sie scheinen nicht zu funktionieren.

In einer der vorherigen Fragen hieß es, dass die Listenelemente nach links schweben anstatt inline anzuzeigen, was ich tat, aber es behob das Problem immer noch nicht.

Ich habe ein seltsames Gefühl, dass es etwas mit meinen Skript-Referenzen in meinem HTML zu tun hat. Sind diese richtig gemacht?

<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> 

Ich bin wirklich ratlos hier, warum es nicht funktionieren. Könnte jemand helfen?

Edit: Ich habe diese Geige gemacht: http://jsfiddle.net/jfHNU/2/ Und es funktioniert dort, und ich sehe nicht, wie mein Code davon verschieden ist.

Answer 1

funktionieren Wenn

ist

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

ausgeführt wird? Läuft es vielleicht, bevor das Dom voll geladen ist und die Li's nicht existieren?

bearbeiten: Es sieht aus wie es läuft, bevor die Seite voll geladen ist. versuchen Sie Ihr Skript-Tag an den unteren Rand der Seite zu bewegen und vielleicht ist es in einem document.ready dh Verpackung:

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

Answer 2

Sie müssen jQuery-ui sind nach jQuery sonst nichts

<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>