Foros del Web » Programando para Internet » Jquery »

[SOLUCIONADO] Calcular cuanto tiempo pasa el cursor sobre un elemento

Estas en el tema de Calcular cuanto tiempo pasa el cursor sobre un elemento en el foro de Jquery en Foros del Web. Hola me gustaría saber si hay alguna forma de recuperar el tiempo que pasa el cursor sobre un elemento concreto. ¿Es posible extraerlo de los ...
  #1 (permalink)  
Antiguo 29/08/2014, 13:54
 
Fecha de Ingreso: junio-2014
Ubicación: Andalucía
Mensajes: 23
Antigüedad: 5 años, 6 meses
Puntos: 0
Calcular cuanto tiempo pasa el cursor sobre un elemento

Hola me gustaría saber si hay alguna forma de recuperar el tiempo que pasa el cursor sobre un elemento concreto.
¿Es posible extraerlo de los metodos .hover() o .mousedown()?

Gracias.
  #2 (permalink)  
Antiguo 29/08/2014, 14:13
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Lima, Perú
Mensajes: 5.433
Antigüedad: 8 años, 1 mes
Puntos: 933
Respuesta: Calcular cuanto tiempo pasa el cursor sobre un elemento

Con el método hover y el objeto Date te basta. Solo necesitas tomar el tiempo al momento de colocar el cursor del mouse sobre el elemento (primer callback), tomar el tiempo al momento de retirar el cursor del mismo (segundo callback) y restar el último tiempo con el primero.

Código Javascript:
Ver original
  1. var time1, time2;
  2.  
  3. $("#id_elemento").hover(function(){
  4.     time1 = new Date().getTime();
  5. }, function(){
  6.     time2 = new Date().getTime();
  7.     console.log(((time2 - time1) / 1000).toFixed()); //Los segundos transcurridos
  8. });

La división entre 1000 la hago porque el método getTime devuelve el tiempo en milésimas de segundo. Con dicha división, el tiempo resultante será expresado en segundos. Si deseas que se visualicen los segundos con milésimas, no apliques el método toFixed.

Saludos
__________________
«Laissez faire et laissez passer, le monde va de lui même»
  #3 (permalink)  
Antiguo 29/08/2014, 16:50
 
Fecha de Ingreso: junio-2014
Ubicación: Andalucía
Mensajes: 23
Antigüedad: 5 años, 6 meses
Puntos: 0
Respuesta: Calcular cuanto tiempo pasa el cursor sobre un elemento

Cita:
Iniciado por Alexis88 Ver Mensaje
Con el método hover y el objeto [URL="http://www.w3schools.com/jsref/jsref_obj_date.asp"][inline]Date[/inline][/URL] te basta. Solo necesitas tomar el tiempo al momento de colocar el cursor del mouse sobre el elemento (primer callback), tomar el tiempo al momento de retirar el cursor del mismo (segundo callback) y restar el último tiempo con el primero.

Código Javascript:
Ver original
  1. var time1, time2;
  2.  
  3. $("#id_elemento").hover(function(){
  4.     time1 = new Date().getTime();
  5. }, function(){
  6.     time2 = new Date().getTime();
  7.     console.log(((time2 - time1) / 1000).toFixed()); //Los segundos transcurridos
  8. });

La división entre 1000 la hago porque el método getTime devuelve el tiempo en milésimas de segundo. Con dicha división, el tiempo resultante será expresado en segundos. Si deseas que se visualicen los segundos con milésimas, no apliques el método toFixed.

Saludos
Hola gracias por responder tan rápido.
Tengo una duda, bueno te pongo el problema que intento solucionar. Quiero capturar el tiempo que el cursor esta sobre un elemento mientras sigue sobre el. Y con una condición comprobar que el tiempo sobrepasa un limite fijado. Esto lo hago porque tengo un menú de navegación y al pasar sobre un <li> realiza una animación. El problema es que cuando paso muchas veces el cursor y muy rápido el menú se vuelve loco y realiza muchas veces las animaciones.
Con el tiempo de espera intento evitar que ocurra esto.
Pero no consigo encontrar la formula para que funcione con lo que tu me has propuesto.
¿Tienes alguna idea u otra forma de solucionar esto?.

Gracias de nuevo, un saludo.
  #4 (permalink)  
Antiguo 29/08/2014, 16:51
 
Fecha de Ingreso: junio-2014
Ubicación: Andalucía
Mensajes: 23
Antigüedad: 5 años, 6 meses
Puntos: 0
Respuesta: Calcular cuanto tiempo pasa el cursor sobre un elemento

Cita:
Iniciado por Alexis88 Ver Mensaje
Con el método hover y el objeto [URL="http://www.w3schools.com/jsref/jsref_obj_date.asp"][inline]Date[/inline][/URL] te basta. Solo necesitas tomar el tiempo al momento de colocar el cursor del mouse sobre el elemento (primer callback), tomar el tiempo al momento de retirar el cursor del mismo (segundo callback) y restar el último tiempo con el primero.

Código Javascript:
Ver original
  1. var time1, time2;
  2.  
  3. $("#id_elemento").hover(function(){
  4.     time1 = new Date().getTime();
  5. }, function(){
  6.     time2 = new Date().getTime();
  7.     console.log(((time2 - time1) / 1000).toFixed()); //Los segundos transcurridos
  8. });

La división entre 1000 la hago porque el método getTime devuelve el tiempo en milésimas de segundo. Con dicha división, el tiempo resultante será expresado en segundos. Si deseas que se visualicen los segundos con milésimas, no apliques el método toFixed.

Saludos
Hola gracias por responder tan rápido.
Tengo una duda, bueno te pongo el problema que intento solucionar. Quiero capturar el tiempo que el cursor esta sobre un elemento mientras sigue sobre el. Y con una condición comprobar que el tiempo sobrepasa un limite fijado. Esto lo hago porque tengo un menú de navegación y al pasar sobre un <li> realiza una animación. El problema es que cuando paso muchas veces el cursor y muy rápido el menú se vuelve loco y realiza muchas veces las animaciones.
Con el tiempo de espera intento evitar que ocurra esto.
Pero no consigo encontrar la formula para que funcione con lo que tu me has propuesto.
¿Tienes alguna idea u otra forma de solucionar esto?.

Gracias de nuevo, un saludo.
  #5 (permalink)  
Antiguo 29/08/2014, 17:05
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Lima, Perú
Mensajes: 5.433
Antigüedad: 8 años, 1 mes
Puntos: 933
Respuesta: Calcular cuanto tiempo pasa el cursor sobre un elemento

Para lo que buscas hacer, en lugar de calcular tiempos, te conviene utilizar el método stop.

Código Javascript:
Ver original
  1. $("#id_elemento").stop(true, false).hover(function(){
  2.     //Cuando el cursor está sobre el elemento
  3. }, function(){
  4.     //Cuando el cursor sale del elemento
  5. });

Saludos
__________________
«Laissez faire et laissez passer, le monde va de lui même»
  #6 (permalink)  
Antiguo 29/08/2014, 17:42
 
Fecha de Ingreso: junio-2014
Ubicación: Andalucía
Mensajes: 23
Antigüedad: 5 años, 6 meses
Puntos: 0
Respuesta: Calcular cuanto tiempo pasa el cursor sobre un elemento

Cita:
Iniciado por Alexis88 Ver Mensaje
Para lo que buscas hacer, en lugar de calcular tiempos, te conviene utilizar el método [URL="http://api.jquery.com/stop/"][inline]stop[/inline][/URL].

Código Javascript:
Ver original
  1. $("#id_elemento").stop(true, false).hover(function(){
  2.     //Cuando el cursor está sobre el elemento
  3. }, function(){
  4.     //Cuando el cursor sale del elemento
  5. });

Saludos
Hola de nuevo.
He probado tu solución pero no me ha funcionado, es raro, tampoco es tan complicado =). No entiendo muy bien como funciona el Stop concatenado con Hover.

Sí quieres puedes echarle un vistazo a la página, es esta: [URL="http://crimson.at/fronter/"]http://crimson.at/fronter/[/URL]
Si pasas ratón muy rápido sobre el menú varias veces veras el efecto que intento prevenir.

Gracias.
  #7 (permalink)  
Antiguo 29/08/2014, 19:18
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Lima, Perú
Mensajes: 5.433
Antigüedad: 8 años, 1 mes
Puntos: 933
Respuesta: Calcular cuanto tiempo pasa el cursor sobre un elemento

Precisamente el método stop evita que se cree una cola de eventos que es lo que sucede en tu página. Muéstranos el código actualizado para ver en dónde estás fallando.

Saludos
__________________
«Laissez faire et laissez passer, le monde va de lui même»
  #8 (permalink)  
Antiguo 29/08/2014, 19:43
 
Fecha de Ingreso: junio-2014
Ubicación: Andalucía
Mensajes: 23
Antigüedad: 5 años, 6 meses
Puntos: 0
Respuesta: Calcular cuanto tiempo pasa el cursor sobre un elemento

Cita:
Iniciado por Alexis88 Ver Mensaje
Precisamente el método stop evita que se cree una cola de eventos que es lo que sucede en tu página. Muéstranos el código actualizado para ver en dónde estás fallando.

Saludos
Bien, este es el trozo de código que controla la animación de los botones. Este todavia no tiene las modificaciones que tu me has recomendado.

Código:
    //Pila de animaciones
    //1º Animacion para Inicio
    $(".home").hover(function () {
        $(".icon-home").animate({"margin-left":"-90px"});
        $("#home_title").animate({"margin-right":"-20px"});
    }, function () {
        $(".icon-home").animate({"margin-left":"20px"});
        $("#home_title").animate({"margin-right":"-225px"});
    });
    //2ª Animacion para Info
    $(".info").hover(function () {
        $(".icon-stack").animate({"margin-left":"-80px"});
        $("#info_title").animate({"margin-right":"-20px"});
    }, function () {
        $(".icon-stack").animate({"margin-left":"0px"});
         $("#info_title").animate({"margin-right":"-225px"});
    });
    //3ª Animacion para Projects
    $(".projects").hover(function () {
        $(".icon-code").animate({"margin-left":"-80px"});
        $("#projects_title").animate({"margin-right":"-20px"});
    }, function () {
        $(".icon-code").animate({"margin-left":"0px"});
        $("#projects_title").animate({"margin-right":"-225px"});
    });
    //4ª Animacion para Contacto
    $(".contact").hover(function () {
        $(".icon-location").animate({"margin-left":"-80px"});
         $("#contact_title").animate({"margin-right":"-20px"});
    }, function () {
        $(".icon-location").animate({"margin-left":"0px"});
        $("#contact_title").animate({"margin-right":"-225px"});
    });
Es un poco redundante y repetitivo.
Hay 4 botones, por lo que existen 4 funciones iguales.
Esta es la explicación de una.
Código:
$(".home").hover(function () {//Se aplica un hover al botón cuyo id es "home"
        $(".icon-home").animate({"margin-left":"-90px"}); //Cuando el ratón dentro se mueve un span con la clase "icon-home" que contiene el icono.
        $("#home_title").animate({"margin-right":"-20px"}); //También se mueve un párrafo cuyo id es "#home_title", este se encuentra mas alla de los margenes del padre, oculto.
    }, function () {
        $(".icon-home").animate({"margin-left":"20px"});//Cuando el raton sale el icono vuelve a su posicion original
        $("#home_title").animate({"margin-right":"-225px"}); //Lo mismo ocurre con el parrado
    });
¿Según tu debería aplicar el stop de la siguiente forma?
Código:
$(".home").stop(true,false).hover(function () {
        $(".icon-home").animate({"margin-left":"-90px"});
        $("#home_title").animate({"margin-right":"-20px"});
    }, function () {
        $(".icon-home").animate({"margin-left":"20px"});
        $("#home_title").animate({"margin-right":"-225px"});
    });
  #9 (permalink)  
Antiguo 29/08/2014, 20:17
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Lima, Perú
Mensajes: 5.433
Antigüedad: 8 años, 1 mes
Puntos: 933
Respuesta: Calcular cuanto tiempo pasa el cursor sobre un elemento

Claro, aunque también afecta la manera en como hayas definido las propiedades para esos elementos en la hoja de estilos. Aquí te muestro dos ejemplos de menúes afectados por el método hover, con la salvedad de que solo el primero está afectado por el método stop.

Con el método stop:


Sin el método stop:


Si gustas, revisa el código fuente para que veas cómo implementé el método stop.

Saludos
__________________
«Laissez faire et laissez passer, le monde va de lui même»

Etiquetas: calcular, cursor, elemento, tiempo
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 18:43.