Question

我看起来又高又低，并尝试了各种各样的事情，但它根本行不通。我看到了这两个SO问题和他们的回答（显然有效），但似乎并不适合我：

jquery bounce effect breaks inline alignment of list

点击后，我想让我的网站上的列表项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

你必须在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>

Answer 2

什么时候

$('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);
  })
});

jQuery跳出效果不能像他们应该那样处理列表项。为什么？

2 个答案: