animate jquery no funciona

hackjose · #1 (**permalink**) 30/01/2014, 19:36

Que tal amigos
Mi codigo esta super facilito y no funciona
No funciona la parte de else

Código HTML:

Ver original<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jose Vega Frontend</title>
    <link rel="stylesheet" href="http://necolas.github.io/normalize.css/2.1.3/normalize.css" />
<style>
*
{
    margin: 0;
    padding: 0;
}
body
{
    font-family: arial;
    font-size: 16px;
    font-weight: 900;
}
 
 
 
header
{
    height: 196px;
}
nav
{
    background-color: #333;
    position: fixed;
    text-align: center;
    width: 100%;
}
nav ul
{
    list-style: none;
}
nav ul li
{
    background-color: #333;
    color: #FFF;
    cursor: pointer;
    height: 20px;
    padding: 4px 0;
}
.flecha-abajo
{
    border-top: 10px solid #FFF;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    display: inline-block;
    height: 0;
    width: 0;
}
.flecha-arriba
{
    border-bottom: 10px solid #FFF;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    display: inline-block;
    height: 0;
    width: 0;
}
</style>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
    $(function(){
 
        $("#flecha").click(function(){
            if($("#flecha2").hasClass("flecha-arriba"))
            {
                $(".aparecer").animate({height:0,padding:0,opacity:0},500);
                $("#hdrbody").animate({height:"56px"},500);
                $("#flecha2").toggleClass("flecha-arriba flecha-abajo");
            }
            else
            {
                $(".aparecer").animate({height:"auto",padding:"4px 0",opacity:1},500);
                $("#hdrbody").animate({height:"196px"},500);
                $("#flecha2").toggleClass("flecha-arriba flecha-abajo");
            }
        });
    });
</script>
</head>
<body>
    <header id="hdrbody">
        <nav>
            <ul>
                <li>Mis Datos</li>
                <li class="aparecer">Donde Estudie</li>
                <li class="aparecer">Cursos que he Tomado</li>
                <li class="aparecer">Experiencia</li>
                <li class="aparecer">Que Manejo</li>
                <li class="aparecer">Sobre Mi</li>
                <li id="flecha"><div id="flecha2" class="flecha-arriba"></div></li>
            </ul>
        </nav>
    </header>
</body>
</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

Alexis88 · #2 (**permalink**) 30/01/2014, 22:08

Probablemente sea por el valor "auto" que le das de altura al contenedor. Prueba dándole los 20px originales.

Código Javascript:

Ver original$(".aparecer").animate({height: "20px", padding: "4px 0", opacity: 1}, 500);

Saludos

hackjose · #3 (**permalink**) 30/01/2014, 22:26

Alexis88 gracias por contestar
Ya hice lo que me sugieres y sigue igual
saludos

Alexis88 · #4 (**permalink**) 31/01/2014, 00:11

¿Seguro?, porque yo lo probé como te sugiero y sí funcionó.

Mira: http://jsbin.com/eQeCemas/1

Saludos

hackjose · #5 (**permalink**) 31/01/2014, 10:04

Alexis88 gracias por contestar nuevamente

Ya probe el ejemplo y nada sigue igual

Doy click y sube Ok
Doy click ara bajar y hace nada

No se a que se deba

Estoy usando chrome y firefox
saludos

Alexis88 · #6 (**permalink**) 31/01/2014, 10:42

Yo también lo he probado en ambos navegadores, también en Opera y Safari y marcha bien como lo puedes comprobar en el link que adjunté en mi anterior respuesta. Muéstranos el código actualizado para ver en qué estás fallando.

Saludos
--------------------------------------------------------------------------------------------
EDITO:

Me he percatado de que dándole clic fuera del triángulo (pero a la misma altura que éste, es decir, a los costados, en la parte oscura), funciona sin problemas.

hackjose · #7 (**permalink**) 31/01/2014, 11:49

Alexis88
Tienes razon funciona si doy click a los costados
Pero cuando le doy click directo a la flecha no hagarra

Finalmente lo solucione con z-index

Gracias
saludos