jQuery fadeIn classe CSS

Question

Sto provando a fare la semplice classe CSS di fadeIn() su determinati oggetti che hanno la classe "button". Voglio sfumare nella classe "hoverbutton" su hover e quindi fadeOut quando il mouse lascia l'oggetto.

Ho trovato questo nelle domande. Sembrava funzionare bene fino a quando non ho notato che quando passavo il mouse su più pulsanti rapidamente alcuni si bloccavano sulla classe "hoverbutton". Non è un indizio su come risolverlo. Qualsiasi suggerimento sarebbe molto apprezzato.

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

sembra che si blocca quando ho Passa il mouse sopra uno e passare rapidamente ad un altro elemento con quella classe prima la dissolvenza sul primo è completa.

stop() ha prodotto lo stesso risultato. classe hover viene ancora bloccato

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

Answer 1

Il problema è dovuto al fatto jQueryUI sta usando la proprietà style di fare l'animazione, e se lo fa non è completa (in quanto si verifica l'hover-out prima di hover-in termina) la classe a cui si sta animando non viene effettivamente aggiunta e quindi non può essere rimossa dal passaggio del mouse.

Per risolvere questo problema, abbiamo bisogno di fare due cose sul hover-out:

• interrompere l'animazione addClass()
• rimuovere qualsiasi stile temporanea creata dalla addClass() animazione

Come così ..

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

Ecco un esempio: http://jsfiddle.net/RBTT8/

Answer 2

Provare ad arrestare la coda di animazione:

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

Answer 3

Controllare la documentazione per stop(). Si potrebbe aggiungere alla vostra chiamata in questo modo:

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

Answer 4

Un approccio alternativo per ottenere lo stesso effetto sarebbe quella di utilizzare CSS3 Transitions, supportato in tutto tranne Internet Explorer (fino alla versione 10).

Ecco un esempio: http://jsfiddle.net/3yr8G/

Answer 5

Provare a utilizzare i CSS add -

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

all'elemento u bisogno di fade in

w3schools transizione di collegamento: http://www.w3schools.com/css/css3_transitions.asp