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

[Alextedicehola]

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.

[Alexis88]

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:

var time1, time2;
 
$("#id_elemento").hover(function(){
    time1 = new Date().getTime();
}, function(){
    time2 = new Date().getTime();
    console.log(((time2 - time1) / 1000).toFixed()); //Los segundos transcurridos
});
 

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

[Alextedicehola]

Iniciado por Alexis88

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:

var time1, time2;
 
$("#id_elemento").hover(function(){
    time1 = new Date().getTime();
}, function(){
    time2 = new Date().getTime();
    console.log(((time2 - time1) / 1000).toFixed()); //Los segundos transcurridos
});
 

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.

[Alextedicehola]

Iniciado por Alexis88

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:

var time1, time2;
 
$("#id_elemento").hover(function(){
    time1 = new Date().getTime();
}, function(){
    time2 = new Date().getTime();
    console.log(((time2 - time1) / 1000).toFixed()); //Los segundos transcurridos
});
 

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.

[Alexis88]

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

Código Javascript:

$("#id_elemento").stop(true, false).hover(function(){
    //Cuando el cursor está sobre el elemento
}, function(){
    //Cuando el cursor sale del elemento
});
 

Saludos

[Alextedicehola]

Iniciado por Alexis88

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:

$("#id_elemento").stop(true, false).hover(function(){
    //Cuando el cursor está sobre el elemento
}, function(){
    //Cuando el cursor sale del elemento
});
 

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.

[Alexis88]

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

[Alextedicehola]

Iniciado por Alexis88

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"});
    });

[Alexis88]

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