Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Ejecutar sentencia mientras permanezca en hover

Estas en el tema de Ejecutar sentencia mientras permanezca en hover en el foro de Frameworks JS en Foros del Web. 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 (permalink)  
Antiguo 22/07/2011, 11:41
 
Fecha de Ingreso: julio-2007
Mensajes: 178
Antigüedad: 10 años, 3 meses
Puntos: 1
Ejecutar sentencia mientras permanezca en hover

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!!!
  #2 (permalink)  
Antiguo 22/07/2011, 12:13
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 6 años, 7 meses
Puntos: 192
Respuesta: Ejecutar sentencia mientras permanezca en hover

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
  1. <!DOCTYPE html>
  2. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  3.   <script>
  4.    $(document).ready(function () {
  5.  
  6.      $('#hello').mouseenter(function(){
  7.        _animarDiv($('#moveme'));
  8.      })
  9.        .mouseleave(function(){
  10.        _detenerAnimacion($('#moveme'));
  11.      });
  12.      
  13.      //funcion para animar
  14.     function _animarDiv(_elem){
  15.       var velocidad = 80000;//velocidad muy baja
  16.       var topActual = _elem.offset().top;
  17.       _elem.animate({
  18.         top: topActual + 10000//animar propiedad TOP
  19.       },velocidad,'linear');//easing "linear", pero puede ser otro
  20.      }
  21.      
  22.      //funcion para detener animacion
  23.      function _detenerAnimacion(_elem){
  24.      _elem.stop();
  25.      }
  26.      
  27.     });
  28.   </script>
  29.   #moveme{
  30.     position:fixed;
  31.     right:0;
  32.     top:0;
  33.     width:100px;
  34.     height:100px;
  35.     background:yellow;
  36.   }
  37. </head>
  38.   <p id="hello">Mover el div</p>
  39.   <div id="moveme"></div>
  40. </body>
  41. </html>
__________________
nahueljose.com.ar
  #3 (permalink)  
Antiguo 25/07/2011, 06:28
 
Fecha de Ingreso: julio-2007
Mensajes: 178
Antigüedad: 10 años, 3 meses
Puntos: 1
Respuesta: Ejecutar sentencia mientras permanezca en hover

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

Etiquetas: hover, javascript, mientras, sentencia
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:24.