我左思右想,尝试了各种办法,但就是行不通。我看到了这两个问题及其回答(显然有效),但似乎对我不起作用:
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>
我真的不知道为什么它不起作用。有人可以帮忙吗?
编辑:我做了这个 fiddle :http://jsfiddle.net/jfHNU/2/它在那里工作,但我看不出我的代码与它有何不同。
最佳答案
什么时候
$('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);
})
});
关于javascript - jQuery 弹跳效果无法像应有的那样对列表项起作用。为什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9893915/