jQuery 反弹效果不适用于应有的列表项。为什么？

Question

我曾高高在上，尝试过各种各样的事情，但它根本行不通。我看到了这两个 SO 问题及其回答（显然有效），但似乎对我不起作用：

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>

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

编辑：我做了这个小提琴：http://jsfiddle.net/jfHNU/2/ 它在那里工作，我看不出我的代码与那个有什么不同。

Answer 1

什么时候

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

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

编辑： 看起来它在页面完全加载之前正在运行。尝试将您的脚本标签移动到页面底部，并可能将其包装在 document.ready 中，即：

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

Answer 2

您必须在 jQuery 之后包含 jQuery-ui，否则将无法正常工作

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