0

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

jquery 弹跳效果打破了列表的内联对齐

jQuery 弹跳到位

我想让我的网站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/它在那里工作，我看不出我的代码与那个有什么不同。

4

2 回答 2

1

您必须在 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>
于 2012-03-27T16:44:32.520 回答
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);
  })​
});
于 2012-03-27T16:45:40.970 回答