Estado de desplazamiento de jQuery - evaluación de retraso

I'm trying to find a way to either delay the evaluation of the hover or an alternate solution to the following:

I have elements with dynamically generated class names. Those with the same class remain opaque when hovered over, the others change opacity. I have created an example here: http://jsfiddle.net/g7JeQ/.

The problem is as soon as the mouse leaves one element to the next, the others opacity is instantly restored, causing a flashing effect. (i.e. 1,2,3 have the same class & 4,5,6 have the same. I want to eliminate this flashing when mousing over between elements in the same class)

If anyone could help me out I would be very grateful.

preguntado el 08 de noviembre de 11 a las 11:11

2 Respuestas

You need to stop previous animation using stop():

$('span').hover(function() {
    var theClass = $(this).attr('class');
    $('span:not(.' + theClass + ')').stop().animate({'opacity': 0.2}, 100);
}, function() {
    $('span').stop().animate({'opacity': 1}, 100); //restore all spans to 100% opacity
});

http://jsfiddle.net/g7JeQ/1/

respondido 08 nov., 11:15

Brilliant, that's perfect. Thanks! - vonholmes

Add a .stop() before every .animate()

http://jsfiddle.net/g7JeQ/2/

respondido 08 nov., 11:15

Thank you also, just what I needed. - vonholmes

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.