Cómo interrumpir un jquery.animate()

walrus86 · #1 (**permalink**) 22/03/2012, 16:03

Hola que tal, tengo una duda a ver si me pueden dar una mano.

En el evento mouseover de un <a> ejecuto un .animate(), haciendo que el div contenedor de ese link se desplace 100px hacia arriba. Y en el mouseout vuelve su lugar original.

Lo que no quiero es que cuando se está desplazando hacia arriba, complete todo su recorrido si saco el cursor de encima. Me gustaria que se interrumpa la animación en ese punto y que comience en ese momento una nueva animación para que vuelva a su lugar original.

A alguien se le ocurre cómo hacer esto?

desde ya muchas gracias!

salu2

Naahuel · #2 (**permalink**) 22/03/2012, 18:06

.stop()

Ejemplo:

Código HTML:

Ver original<!doctype html>
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('div')
                .mouseover(function(){
                    $(this).stop().animate({
                        left : 200
                    })
                })
                .mouseout(function(){
                    $(this).stop().animate({
                        left : 0
                    })
                })
        });
    </script>
    <title>Test</title>
    <style type="text/css">
    <!--
        div{
            position:absolute;
            width:200px;
            height:200px;
            background:red;
        }
    -->
    </style>
</head>
<body>
    <div></div>
</body>
</html>

walrus86 · #3 (**permalink**) 23/03/2012, 12:48

Mil gracias Naahuel! anduvo perfecto, era ese stop() el que hacia la magia jeje

salu2!