Problem with animate(). ¿Why this code isn't working?.

Problem with animate(). ¿Why this code isn't working?.

I have the following code in HTML

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <link href="style.css" rel="stylesheet" type="text/css" />
  6. <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
  7. <script type="text/javascript" src="js/menu.js"></script>
  8. <title>Untitled Document</title>
  9. </head>
  10. <body>
  11. <div id="cabezal">
  12.     <div class="contenedorcabezal">
  13.         <div class="logotipo">
  14.         </div>
  15.         <div class="menu">
  16.             <ul>
  17.                 <li class="apa"><a href="#">Inicio</a></li>
  18.                 <li class="apa"><a href="#">Nosotros</a></li>
  19.                 <li class="apa"><a href="#">Modelos</a></li>
  20.                 <li class="apa"><a href="#">Servicios</a></li>
  21.                 <li class="apa"><a href="#">Contacto</a></li>
  22.                 </ul>
  23.         </div><!--Menú-->
  24.     </div><!--Contenedor Cabezal-->
  25. </div><!--Cabezal-->
  26. </body>
  27. </html>

And I'm trying to animate the menu with the following code, but this just doesn't work. So ¿What's the problem here?. Thanks for the help

  1. $(function () {
  2.     $('.apa').hover(function(){
  3.         $(this).children('a').stop().animate({ 'top': '5px'},100);
  4.     }, function() {
  5.         $(this).children('a').stop().animate({ 'top': '0px'},100);
  6.     });
  7. });