Ejecutar sentencia mientras permanezca en hover

hermess87 · #1 (**permalink**) 22/07/2011, 11:41

Hola amigos! vengo con una duda... A alguien se le ocurre como puedo lograr hacer esta sentencia:

Código:

if(paraArriba != 0){
	  $("#desplazarVer").animate({"top": "+=2px"}, 10);
	  paraArriba=paraArriba -1;
	}

Mientras permanezco en Hover sobre un botón? y al salir del mismo que se detenga??

Es para hacer un menú que se desliza con scroll...

Desde ya les agradezco mucho Suerte!!!

Naahuel · #2 (**permalink**) 22/07/2011, 12:13

En estos caso viene bien un plugin:
http://plugins.jquery.com/project/Pa...sume-animation

Ese plugin permite pausar y resumir una animación. Ejemplo:
http://jsbin.com/aleheg/2 (Mirá en "edit" para ver el código. Lo que sale a la izquierda es el plugin).

Otra forma (Que puede ser mejor, pues nos evitamos el uso de plugins y además es más personalizable) es usar .stop() y .animate() con un correcto uso de .mouseenter() y .mouseleave(), haciendo que la velocidad sea lenta:
http://jsbin.com/aleheg/3

Código:

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script>
   $(document).ready(function () {
 
     $('#hello').mouseenter(function(){
       _animarDiv($('#moveme'));
     })
       .mouseleave(function(){
       _detenerAnimacion($('#moveme'));
     });
     
     //funcion para animar 
    function _animarDiv(_elem){
      var velocidad = 80000;//velocidad muy baja
      var topActual = _elem.offset().top;
      _elem.animate({
        top: topActual + 10000//animar propiedad TOP
      },velocidad,'linear');//easing "linear", pero puede ser otro
     }
     
     //funcion para detener animacion
     function _detenerAnimacion(_elem){
     _elem.stop();
     }
     
    });
  </script>
<style>
  #moveme{
    position:fixed;
    right:0;
    top:0;
    width:100px;
    height:100px;
    background:yellow;
  }
</style>
</head>
<body>
  <p id="hello">Mover el div</p>
  <div id="moveme"></div>
</body>
</html>

hermess87 · #3 (**permalink**) 25/07/2011, 06:28

Gracias amigo!!! Acabo de probarlo, lo adapte y funciono perfecto :):):)
Te agradezco mucho! Suerte!