Problemas con animate de jQuery

erxaca · #1 (**permalink**) 07/12/2011, 18:22

Hola compañeros,

intento hacer que un recuadro baje al evento click y vuelva a su posicion inicial al sacar el mouse fuera de ese recuadro o capa.

Lo estoy haciendo con .animate() de jQuery, el recuadro se desplaza para abajo al hacer click pero de seguido vuelve a su posicion pese a que no saco el mouse del recuadro y el z-index está al máxmo en mi CSS.

Os paso el código para que lo testeeis y me comenteis si veis cual es el fallo o donde me equivoco.

Código PHP:

  <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="es" lang="es">

<head>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript">

    <!--

        $(document).ready(function(){

            //Sesiones

            $('#registro').click(function(){

                $("#registro").animate({

                    top: "0px"

                }, 1000);

            });

            $('#registro').mouseout(function(){

                $("#registro").animate({

                    top: "-55px"

                }, 600);

            });

        });

    //-->

    </script>

</head>

<body style="margin:0;">

    <div style="background:#333;height:200px;width:600px;">

        <div id="registro" style="position:absolute;top:-55px;left:50px;width:177px;height:70px;z-index:9999;background:#FFF;">

            <p>Hola</p>

        </div>

    </div>

</body>

</html>

Gracias de antemano ;)

chicohot20 · #2 (**permalink**) 08/12/2011, 07:54

Código HTML:

Ver original<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="es" lang="es"> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
    <!-- 
        $(document).ready(function(){ 
            //Sesiones 
            $('#registro').click(function(){ 
                $(this).animate({ 
                    top: "0px" 
                }, 1000); 
            }); 
            $('#registro').hover(function(){
            },function(){
                $(this).animate({ 
                    top: "-55px" 
                }, 600); 
            }); 
        }); 
    //--> 
    </script> 
</head> 
<body style="margin:0;"> 
    <div style="background:#333;height:200px;width:600px;"> 
        <div id="registro" style="position:absolute;top:-55px;left:50px;width:177px;height:70px;z-index:9999;background:#FFF;"> 
            <p>Hola</p> 
        </div> 
    </div> 
</body> 
</html>

erxaca · #3 (**permalink**) 08/12/2011, 08:52

Uau! gracias chicohot20

No comprendo el porqué de poner la parte del hover fuera de la primera función, lo metes en una nueva, ¿me podrías explicar esa parte? Está claro que ahí fallaba pero no comprendo el código

Por cierto, hay alguna manera en jQuery de limitar las acciones por segundo? por ejemplo se puede hacer varios clicks y sacar el mouse rápidamente y como es obvio hace el efecto tantas veces como se le haya dado.

chicohot20 · #4 (**permalink**) 08/12/2011, 09:53

Código HTML:

Ver original<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="es" lang="es"> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
    <!-- 
        $(document).ready(function(){ 
            //Sesiones 
            $('#registro').click(function(){ 
                $(this).animate({ 
                    top: "0px" 
                }, 1000); 
            }); 
            $('#registro').hover(function(){
            },function(){
                $(this).stop(true).animate({ 
                    top: "-55px" 
                }, 600);
            }); 
        }); 
    //--> 
    </script> 
</head> 
<body style="margin:0;"> 
    <div style="background:#333;height:200px;width:600px;"> 
        <div id="registro" style="position:absolute;top:-55px;left:50px;width:177px;height:70px;z-index:9999;background:#FFF;"> 
            <p>Hola</p> 
        </div> 
    </div> 
</body> 
</html>

Lee la documentacion:

http://api.jquery.com/hover/
http://api.jquery.com/stop/

erxaca · #5 (**permalink**) 08/12/2011, 16:16

Gracias chicohot20, me pondré a estudiarlo