javascript - jQuery 弹跳效果无法像应有的那样对列表项起作用。为什么？

Question

我左思右想，尝试了各种办法，但就是行不通。我看到了这两个问题及其回答(显然有效)，但似乎对我不起作用:

jquery bounce effect breaks inline alignment of list

jQuery Bounce In Place

我想在我的网站上创建列表项 http://web.cs.dal.ca/~webucat/点击时弹起。这是我的 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>

还有我的 jQuery:

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

但它们似乎不起作用。

在前面的一个问题中，它说让列表项向左浮动而不是内联显示，我这样做了，但它仍然没有解决问题。

我有一种奇怪的感觉，这与 HTML 中的脚本引用有关。这些都正确完成了吗？

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

我真的不知道为什么它不起作用。有人可以帮忙吗？

编辑:我做了这个 fiddle :http://jsfiddle.net/jfHNU/2/它在那里工作，但我看不出我的代码与它有何不同。

Answer 1

什么时候

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

被处决？它是否可能在 dom 完全加载之前运行，因此 li 不存在？

编辑:看起来它是在页面完全加载之前运行的。尝试将脚本标记移动到页面底部，并可能将其包装在文档中。准备好即:

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