ejemplos - jquery animate transform

jquery agregar un fade a un.addClass

Question

¿Cómo me desvanezco .addClass dentro y fuera.

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

La función jQuery .animate es la mejor .animate , aunque esto no te permitirá animar entre clases de CSS, debes 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 página de .animate jQuery:

El proyecto jQuery UI amplía el método .animate () al permitir la animación de algunos estilos no numéricos, como los colores. El proyecto también incluye mecanismos para especificar animaciones a través de clases CSS en lugar de atributos individuales

Answer 2

Si desea atenuar los colores de un elemento, deberá utilizar la interfaz de usuario jQuery, que tiene un soporte más avanzado para la atenuación y la animación (la jQuery principal solo puede atenuar / animar las propiedades de enteros: los colores no funcionan).

Incluso es compatible con la animación de todas las propiedades en una clase CSS completa , por lo que al usar jQuery UI, debería poder lograr el efecto que desea.

Answer 3

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

Además, es probable que pueda simplificar su selector, parece que :even e :odd hará el trabajo en función de su selector actual, de esta manera:

$(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 primer elemento, porque está basado en 0, por lo que incluso selecciona 0º, 2º, 4º, etc. Espero que estés de acuerdo, que sea un poco más fácil de mantener :)

Edite según los comentarios : dado que .toggleclass() mantiene en los .toggleclass() rápidos, 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);  
});