Tema: animate jquery no funciona
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 30/01/2014, 19:36
Avatar de hackjose
hackjose
 
Fecha de Ingreso: abril-2010
Ubicación: Edo Mexico
Mensajes: 1.178
Antigüedad: 14 años, 7 meses
Puntos: 131
animate jquery no funciona
Que tal amigos
Mi codigo esta super facilito y no funciona
No funciona la parte de else

Código HTML: 
Ver original
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Jose Vega Frontend</title>
  6.     <link rel="stylesheet" href="http://necolas.github.io/normalize.css/2.1.3/normalize.css" />
  7. <style>
  8. *
  9. {
  10.     margin: 0;
  11.     padding: 0;
  12. }
  13. body
  14. {
  15.     font-family: arial;
  16.     font-size: 16px;
  17.     font-weight: 900;
  18. }
  19.  
  20.  
  21.  
  22. header
  23. {
  24.     height: 196px;
  25. }
  26. nav
  27. {
  28.     background-color: #333;
  29.     position: fixed;
  30.     text-align: center;
  31.     width: 100%;
  32. }
  33. nav ul
  34. {
  35.     list-style: none;
  36. }
  37. nav ul li
  38. {
  39.     background-color: #333;
  40.     color: #FFF;
  41.     cursor: pointer;
  42.     height: 20px;
  43.     padding: 4px 0;
  44. }
  45. .flecha-abajo
  46. {
  47.     border-top: 10px solid #FFF;
  48.     border-left: 10px solid transparent;
  49.     border-right: 10px solid transparent;
  50.     display: inline-block;
  51.     height: 0;
  52.     width: 0;
  53. }
  54. .flecha-arriba
  55. {
  56.     border-bottom: 10px solid #FFF;
  57.     border-left: 10px solid transparent;
  58.     border-right: 10px solid transparent;
  59.     display: inline-block;
  60.     height: 0;
  61.     width: 0;
  62. }
  63. </style>
  64.     <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
  65. <script>
  66.     $(function(){
  67.  
  68.         $("#flecha").click(function(){
  69.             if($("#flecha2").hasClass("flecha-arriba"))
  70.             {
  71.                 $(".aparecer").animate({height:0,padding:0,opacity:0},500);
  72.                 $("#hdrbody").animate({height:"56px"},500);
  73.                 $("#flecha2").toggleClass("flecha-arriba flecha-abajo");
  74.             }
  75.             else
  76.             {
  77.                 $(".aparecer").animate({height:"auto",padding:"4px 0",opacity:1},500);
  78.                 $("#hdrbody").animate({height:"196px"},500);
  79.                 $("#flecha2").toggleClass("flecha-arriba flecha-abajo");
  80.             }
  81.         });
  82.     });
  83. </script>
  84. </head>
  85. <body>
  86.     <header id="hdrbody">
  87.         <nav>
  88.             <ul>
  89.                 <li>Mis Datos</li>
  90.                 <li class="aparecer">Donde Estudie</li>
  91.                 <li class="aparecer">Cursos que he Tomado</li>
  92.                 <li class="aparecer">Experiencia</li>
  93.                 <li class="aparecer">Que Manejo</li>
  94.                 <li class="aparecer">Sobre Mi</li>
  95.                 <li id="flecha"><div id="flecha2" class="flecha-arriba"></div></li>
  96.             </ul>
  97.         </nav>
  98.     </header>
  99. </body>
  100. </html>

Supongo que es el metodo animate pero en verdad no se como solucionar, si no tendre que hacerlo a mano con un setInterval

Espero me puedan ayudar
saludos