bounce effect not working

Question

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>

score 2 · Answer 1 · edited Jul 24 '13 at 06:49

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.

edited Jul 24 '13 at 06:49

Ionică Bizău

109,027
88
289
474

answered Jul 24 '13 at 04:24

JanR

6,052
3
23
30

I downvoted because the jQuery UI CSS is not needed. Only jQuery UI js is needed in this case. – Ionică Bizău Jul 24 '13 at 06: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 '13 at 00:40

score 2 · Accepted Answer · edited Jul 24 '13 at 06:50

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

edited Jul 24 '13 at 06:50

Ionică Bizău

109,027
88
289
474

answered Jul 24 '13 at 04:29

Arun Bertil

4,598
4
33
59

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. – BliaKong Lee Jul 24 '13 at 04: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 tags are on the outside of the
tags and not the other way around like in your example?

BliaKong Lee

Jul 24 '13 at 04:57

Okay. Nevermind. I was referring to the answer above yours. Thank you so much for your help! – BliaKong Lee Jul 24 '13 at 05: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 – Arun Bertil Jul 24 '13 at 05: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. – BliaKong Lee Jul 24 '13 at 05:30

score 1 · Answer 3 · edited Jul 24 '13 at 06:49

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/

edited Jul 24 '13 at 06:49

Ionică Bizău

109,027
88
289
474

answered Jul 24 '13 at 04:26

web2008

914
4
11

score 0 · Answer 4 · edited May 23 '17 at 11:59

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

bounce effect not working

4 Answers4