質問
I want to make some list items bounce on hover, but can't seem to figure out why it's not working. This is the link to the coding on jsfiddle: http://jsfiddle.net/wrdweaver6/amhJK/
Here is the code that I am using in my html head:
https://stackoverflow.com/questions/17825088
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#nav > li').hover(function() {
$(this).effect('bounce',{times: 2},'slow');
});
});
</script>
</head>
Here is the body:
<body>
<div id="nav">
<ul>
<li>Word Lists</li>
<li>Games</li>
<li>Stories</li>
<li>Parents</li>
<li>Email</li>
</ul>
</div>
</body>
解決
Try the following Js fiddle
http://jsfiddle.net/arunberti/Dy6h7/
$(document).ready(function(){
$('li a').hover(function() {
$(this).parent().effect("bounce", { times:3 }, 'normal');
}, function () {
$(this).parent().effect("bounce", { times:3 }, 'normal');
});
});
Also check the following image that you didint add Jquery UI
他のヒント
Two things I noticed:
Try out the following code:
$(document).ready(function(){
$('#nav ul>li').click(function(){
$(this).effect('bounce',{times:3},500);
});
})
Please find the working demo here: http://jsfiddle.net/amhJK/9/
I guess you want to use effect() jQuery UI function.
First of all, the jQuery UI was not imported in your JSFIDDLE.
Import it in your page using the cdn url:
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
Another problem is that your selector is not correct. > is the child selector that selects all direct child elements specified by "child" of elements specified by "parent".. So, instead of #nav > li you should use #nav > ul > li or #nav li, both working.
Another problem is that you use the string "this" instead of variable this that is the reference to the DOM element of invocation. See this topic for more information.
Your script becomes:
// on ready callback
$('#nav > ul > li').hover(function(){
$(this).effect('bounce',{times:3},500);
});
