JQuery aggiungere una dissolvenza a un .addClass

Question

Come faccio a svanire .addClass dentro e fuori.

Ecco il link -

http://www.bikramyogajoondalup.com.au/ su-Bikram yoga / posture-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 prima elemento, perché è 0 sulla base, quindi, anche di selezionare 0a, 2 °, 4 °, ecc spero che sarete d'accordo, lo rende un po 'più facile da mantenere:)

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

$('#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, sarà necessario utilizzare jQuery UI che ha più supporto avanzato per dissolvenza e animazione (il nucleo jQuery può solo dissolvenza / animare oggetti interi: colori non funzionano).

E 'anche supporta animare tutte le proprietà a un'intera classe CSS , in modo da utilizzare jQuery UI, si dovrebbe essere in grado di raggiungere l'effetto desiderato.

Answer 3

.animate funzione è la soluzione migliore, anche se questo non ti consente di animare tra le classi CSS - è necessario specificare i singoli stili

.

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

  

Il href="http://jqueryui.com/" rel="nofollow noreferrer"> progetto estende la   .animate () metodo permettendo alcuni   stili non numerici come i colori a   essere animato. Il progetto prevede anche   meccanismi per specificare animazioni   attraverso classi CSS, piuttosto che   singoli attributi