0

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:

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

4 Answers 4

2

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

enter image description here

5
  • How do I go about adding the Jquery UI into my fiddle and correctly into the html head? I'm sorry. I am a beginner, and just started playing around with coding, so I apologize if I sound like a complete idiot at this point. Jul 24, 2013 at 4:43
  • @Johnツ This was exactly what I was looking for. One more question though, if I run the code the way it is, won't I receive a validation error if I try to run it through W3c's html validation service since normally, the <a> tags are on the outside of the <li> tags and not the other way around like in your example? Jul 24, 2013 at 4:57
  • Okay. Nevermind. I was referring to the answer above yours. Thank you so much for your help! Jul 24, 2013 at 5:07
  • @bliakong lee were you able to resolve the issue?if this helped dont forgot to mark as answer coz some ppl who have answered this post seems to downvote Jul 24, 2013 at 5:16
  • @ArunBertil Your jsfiddle was what I wanted, since it did not cause the li elements to stack on top of each other like mine, but I am concerned that the coding will cause an html error when validating since you have your a tags on the inside of your li tags. I have to run my coding through W3c's html validation service for the class that I am taking. Jul 24, 2013 at 5:30
2

Two things I noticed:

  • One your selector is wrong, it should just be $('#nav li') as li is not a direct child element of the #nav
  • Secondly you need to include the jquery UI JS, pretty sure the animations won't work without the JS file.
2
  • I downvoted because the jQuery UI CSS is not needed. Only jQuery UI js is needed in this case. Jul 24, 2013 at 6:48
  • Fair enough, I was under the assumption UI was using keyframe CSS animations, but never really looked into it to be honest :) I just always link the CSS
    – JanR
    Jul 25, 2013 at 0:40
1

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/

0

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);
});

Updated JSFIDDLE

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.