jquery agregue un fundido a un .addClass

Question

¿Cómo se desvanece .addClass dentro y fuera.

Aquí está el enlace -

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 utilizar .toggleClass(class, duration) para esto.

Además, es probable que pueda simplificar su selector, parece que :even y :odd hará el trabajo basado en el selector de corriente, así:

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

me di cuenta lo anterior parece al revés, pero :even Cómo selecciona la primera elemento, porque es 0 sobre la base, por lo que incluso selecciona 0º, 2º, 4º, etc Espero que usted estará de acuerdo, hace que sea un poco más fácil de mantener :)

Editar basado en los comentarios - Desde .toggleclass() palos en cierne rápidos, aquí es una alternativa que funciona como se esperaba, sólo 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 hacer desaparecer los colores de un elemento, se le necesita usar jQuery UI que tiene soporte más avanzado para desvanecimiento y animación (el núcleo jQuery solo puede desvanecer/animar propiedades enteras: colores don no funciona).

Incluso admite la animación de todas las propiedades en an entire CSS class, por lo que con jQuery UI, debería poder lograr el efecto que desee.

Answer 3

la función jQuery .animate es la mejor opción, aunque esto no le permitirá animar entre clases de CSS; debe especificar los estilos individuales.

Usted sería mejor usar el jQquery interfaz de usuario, ya que esto proporcionaría para este tipo de funcionalidad, como se indica en la página jQuery animate:

El proyecto jQuery UI extiende el método .animate() al permitir algunos estilos no numéricos como los colores se animan. El proyecto también incluye mecanismos para especificar animaciones través de clases CSS en lugar de los diferentes atributos del