jquery aggiungere una dissolvenza a un .addClass

Question

Come dissolvenza .addClass in e out.

Ecco il link -

http://www.bikramyogajoondalup.com.au/about-bikram-yoga/postures-benefits.html

e qui è il codice -

$(document).ready(function() { 
    $('#menu li#Q_01,#menu li#Q_03,#menu li#Q_05,#menu li#Q_07,#menu li#Q_09,#menu li#Q_11,#menu li#Q_13').hover(function() { 
    $(this).addClass('pretty-hover'); 
    }, function() { 
    $(this).removeClass('pretty-hover'); 
    }); 
}); 

$(document).ready(function() { 
    $('#menu li#Q_02,#menu li#Q_04,#menu li#Q_06,#menu li#Q_08,#menu li#Q_10,#menu li#Q_12').hover(function() { 
    $(this).addClass('pretty-hover_01'); 
    }, function() { 
    $(this).removeClass('pretty-hover_01'); 
    }); 
}); 

Grazie

Answer 1

Se jQuery UI è un'opzione, è possibile utilizzare .toggleClass(class, duration) per questo.

Inoltre, probabilmente si può semplificare il selettore, sembra che :even e :odd farà il lavoro, sulla base di selettore di corrente, in questo modo:

$(function() { 
    $('#menu li:even').hover(function() { 
    $(this).toggleClass('pretty-hover', 500); 
    }); 
    $('#menu li:odd').hover(function() { 
    $(this).toggleClass('pretty-hover_01', 500); 
    }); 
}); 

mi rendo conto quanto sopra sembra indietro, ma :even fa selezionare il primo elemento , perché è 0 sulla base, quindi seleziona anche 0a, 2 °, 4 °, ecc spero che sarete d'accordo, lo rende un po 'più facile da mantenere :)

Modifica sulla base di commenti - Dal .toggleclass() bastoni sul libra rapidi, ecco un'alternativa che funziona come previsto, solo un po 'più a lungo:

$('#menu li.post:even').hover(function() { 
    $(this).stop().animate({ backgroundColor: '#009FDD', color: '#FFF' }, 500); 
}, function() { 
    $(this).stop().animate({ backgroundColor: '#FFFFFF', color: '#666' }, 500); 
}); 
$('#menu li.post:odd').hover(function() { 
    $(this).stop().animate({ backgroundColor: '#623A10', color: '#FFF' }, 500); 
}, function() { 
    $(this).stop().animate({ backgroundColor: '#FFFFFF', color: '#666' }, 500); 
}); 

Answer 2

Se si desidera sbiadire i colori di un elemento, potrai è necessario utilizzare jQuery UI che ha un supporto più avanzato per la dissolvenza e l'animazione (il core jQuery può solo dissolvere/animare le proprietà dell'intero: i colori don lavorare).

Supporta anche l'animazione di tutte le proprietà in an entire CSS class, quindi utilizzando l'interfaccia utente di jQuery, dovresti essere in grado di ottenere l'effetto desiderato.

Answer 3

la funzione jQuery .animate è la migliore, anche se questo non ti permette di animare tra le classi CSS - devi specificare i singoli stili.

Si sarebbe meglio usare la jQquery interfaccia utente, in quanto ciò avrebbe fornito per questo tipo di funzionalità, come indicato nella pagina jQuery animate:

Il progetto jQuery UI estende il metodo .animate(), consentendo alcuni stili non numerici come i colori per essere animati. Il progetto prevede anche meccanismi per specificare le animazioni attraverso classi CSS, piuttosto che singoli attributi