jQuery Agregue un desvanecimiento a una .AddClass

Question

¿Cómo me desvango?

Aqui esta el link -

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

Y aquí está el código -

$(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');
  });
});

Gracias

Answer 1

Si JQuery UI es una opción, puede usar .toggleClass(class, duration) para esto.

Además, probablemente pueda simplificar su selector, parece :even y :odd Hará el trabajo en función de su selector actual, como este:

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

Me doy cuenta de que lo anterior parece al revés, pero :even Selecciona el primero Elemento, porque está basado en 0, por lo que incluso selecciona 0, 2, 4º, etc. Espero que esté de acuerdo, hace que sea un poco más fácil de mantener :)

Editar basado en comentarios - Ya que .toggleclass() Se adhiere a Quick Hover, aquí hay una alternativa que funciona como se esperaba, solo un poco más:

$('#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

Si desea desvanecer los colores de un elemento, deberá usar jQuery ui que tiene un soporte más avanzado para el desvanecimiento y la animación (la jQuery principal solo puede desvanecerse/animar las propiedades enteras: los colores no funcionan).

Incluso admite animar todas las propiedades en toda una clase de CSS, entonces, usando jQuery UI, debería poder lograr el efecto que desee.

Answer 3

la jQuery .animar La función es la mejor apuesta, aunque esto no le permitirá animar entre las clases CSS: debe especificar los estilos individuales.

Sería mejor usar la interfaz de usuario de JQQuery, ya que esto proporcionaría este tipo de funcionalidad, como se indica en la jQuery animar página:

los jQuery ui El proyecto extiende el método .animate () permitiendo que algunos estilos no numéricos, como los colores se animen. El proyecto también incluye mecanismos para especificar animaciones a través de clases CSS en lugar de atributos individuales