Actualmente tengo varios elementos seguidos que tienen un evento de mouseover que dispara alguna animación. Mi problema es que si alguien pasa el mouse sobre varios de los elementos en rápida sucesión, la animación se vuelve un poco frenética.

Tengo curiosidad por saber si hay una manera de tener un evento de mouseover que solo se active si el mouse está sobre un elemento durante un cierto período de tiempo (por ejemplo, 250 milisegundos). ¿Se puede hacer esto con jQuery?

1
Abe Miessler 18 ago. 2011 a las 01:49

4 respuestas

La mejor respuesta

Te sugiero que uses setTimeout para esto:

(function ($) {
    var t;
    $('ul li').hover(function() {
        var that = this;
        window.clearTimeout(t);
        t = window.setTimeout(function () {
            $(that).animate({opacity: .5}, 'slow').animate({opacity: 1});
          }, 250);
    });
}(jQuery));

Si hay varios elementos activados en una sucesión rápida, el tiempo de espera anulará el id de tiempo de espera, evitando así que el primer elemento que no comience a animarse.

No requiere ningún complemento arcano (aunque hoverIntent puede proporcionar algunas características adicionales agradables que desee utilizar) y window.setTimeout es compatible en todas partes.

ACTUALIZACIÓN

Actualicé el código de muestra para que funcione ... ayer escribía esto desde la memoria y no recibí la llamada setTimeout del todo bien. También vea this jsFiddle como referencia.

El problema que veo con esto es que ejecutará la animación de desplazamiento incluso si abandonas el. Por lo tanto, también puede agregar un $('ul').mouseleave(function() { window.clearTimeout(t) }); para evitar eso.

Saludos Daniel

4
Tigraine 18 ago. 2011 a las 07:36

Si: para lograr esto, coloque un setTimeout en su función onMouseover y un clearTimeout en el mouseout

Es posible que necesite un poco más de lógica, pero eso es lo esencial.

1
Mala 17 ago. 2011 a las 21:52

Le sugiero que consulte el complemento jQuery HoverIntent (1.4k minificado). Aquí está el enlace: http://cherne.net/brian/resources/jquery.hoverIntent.html. Es un gran complemento, ¡lo he usado muchas veces!

Aquí hay una pequeña muestra de código:

var config = {    
     over: makeTall, // function = onMouseOver callback (REQUIRED)    
     timeout: 500, // number = milliseconds delay before onMouseOut    
     out: makeShort // function = onMouseOut callback (REQUIRED)    
};

$("#demo3 li").hoverIntent( config )
4
James Hill 17 ago. 2011 a las 23:25

Aquí hay un ejemplo de stop() en acción, espero que ayude:

Sin stop():

http://jsfiddle.net/5djzM/

Con stop() limpiando la cola de animaciones:

http://jsfiddle.net/KjybD/

0
vdegenne 17 ago. 2011 a las 22:31