jQuery fadeIn clase de CSS

Question

Estoy tratando de hacer clases de fadeIn() CSS simples en ciertos objetos que tienen la clase "botón". Quiero desvanecerme en la clase "hoverbutton" al pasar el mouse y luego desaparecer cuando el mouse deja el elemento.

Encontré esto en las preguntas. Pareció funcionar bien hasta que noté que cuando sobre varios botones rápidamente algunos se atascan en la clase "hoverbutton". Ni una pista de cómo arreglar eso. Cualquier sugerencia seria genial.

$('.button').hover(function(){ 
    $(this).addClass('hoverbutton', 200); 
}, function(){ 
    $(this).removeClass('hoverbutton', 200); 
}); 

parece que se atascan cuando se ciernen sobre uno y saltar rápidamente a otro elemento con esa clase antes la decoloración en la primera de ellas es completa.

stop() produce el mismo resultado. clase de vuelo estacionario todavía queda atascado

$('.button').hover(function(){ 
    $(this).stop().addClass('hoverbutton', 200); 
}, function(){ 
    $(this).stop().removeClass('hoverbutton', 200); 
}); 

Answer 1

El problema se debe a que jQueryUI está utilizando la propiedad style hacer la animación, y si no se completa (porque se produce la libración de salida antes de asomar-en finaliza) la clase a la que anima no se agrega en realidad, por lo que no puede eliminarse mediante el desplazamiento hacia afuera.

Para solucionar este problema, tenemos que hacer dos cosas en el vuelo estacionario de salida:

• detener la animación addClass()
• eliminar cualquier estilo temporal creado por el addClass() animación

Al igual que ..

$('.button').hover(function() { 
    $(this) 
     .addClass('hoverbutton', 200); 
}, function() { 
    $(this).stop() 
     .attr("style", "") 
     .removeClass('hoverbutton', 200); 
}); 

Aquí hay un ejemplo: http://jsfiddle.net/RBTT8/

Answer 2

Intente detener la cola de la animación:

$('.button').hover(function(){ 
    $(this).stop().addClass('hoverbutton', 200); 
}, function(){ 
    $(this).stop().removeClass('hoverbutton', 200); 
}); 

Answer 3

Mira la documentación para stop(). Se podría añadir a su llamada, así:

$('.button').hover(function(){ 
    $(this).stop().addClass('hoverbutton', 200); 
}, function(){ 
    $(this).stop().removeClass('hoverbutton', 200); 
}); 

Answer 4

Un enfoque alternativo para lograr el mismo efecto sería utilizar CSS3 Transitions, apoyado en todo lo excepto Internet Explorer (hasta la versión 10).

He aquí un ejemplo: http://jsfiddle.net/3yr8G/

Answer 5

Intente utilizar CSS add -

ex)--styles take 0.5s to appear  transition: all 0.5s ease-in-out; 

al elemento u necesidad de desaparecer en

w3schools enlace de transición: http://www.w3schools.com/css/css3_transitions.asp