Search code examples
jquerybounce

bounce effect not working

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

  • 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