agregar/eliminar la transición de clase no funciona

Tengo un menú hecho por una lista "ul". Tengo 2 clases para estilo hover y normal. Quiero animar la transición entre esas 2 clases al pasar el mouse.

Tengo este html:

<ul class="mainNav">
                <li><a href="#">Home</a></li>
                <li><a href="#">Store</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Your Account</a></li>
                <li><a href="#">Contact</a></li>
</ul>

clases:

para pasar el ratón, no pasar el ratón

jQuery 1.9.1; IU 1.10.1

código jQuery:

$('.mainNav li:not(:last-child)').hover(function(){

    $(this).addClass("forHover",3000);
    return false;
},function(){

    $(this).removeClass("forHover",3000);
    return false;

});

El efecto de desplazamiento funciona bien, pero no hay transición. ¿Por que no?

preguntado el 07 de marzo de 13 a las 22:03

Que obtienes de console.log($.ui) Nota: en su código actual, no está usando notHover -

Podría usar transiciones CSS3 para los estados de desplazamiento:

@Horen Puedes con jQuery UI: api.jqueryui.com/addClass -

Objeto {versión: "1.10.1", código clave: Objeto, es decir: falso, complemento: Objeto, hasScroll: función…} -

@KevinB eso es bastante impresionante, no lo sabía. -

2 Respuestas

Creo que estás usando el addClass y removeClass de la API jQuery estándar.

Debe hacer referencia a la API de jQuery UI para la versión de UI.

DEMO -- Usar la referencia de la API de la interfaz de usuario jQuery UI 1.10.1 funciona bien

Descargué los efectos de la versión 1.10.1 y los agregué a la DEMO anterior.
La DEMO utiliza exactamente las mismas versiones y todo funciona. Hay algún otro problema localizado que está experimentando ya que jQuery UI funciona de forma inmediata.

Tal vez alguna otra API o complemento al que hace referencia se está sobrescribiendo $.ui o similar

La demostración está usando su código tal como está y jQuery 1.9.1 + jQuery UI 1.10.1 tal como está:

$('.mainNav li:not(:last-child)').hover(function () {
    $(this).addClass("forHover", 3000);
    return false;
}, function () {
    $(this).removeClass("forHover", 3000);
    return false;
});

Editar

Revisé su sitio que está vinculando e incluso después de usar su forHover CSS todavía funciona en los últimos Chrome, Firefox e IE10.

No pude ver ni entender por completo qué intentaba hacer el resto de JavaScript en su archivo, pero tendría que adivinar que en algún lugar está haciendo algo con esos elementos del menú que de alguna manera contrarresta el efecto de animación.

DEMO - usando el CSS de tu forHover actual

Editar

Ahora veo lo que está pasando. Usando las herramientas de desarrollador que puede ver al seleccionar el li que al pasar el cursor sobre los elementos del menú, forHover se aplica pero se sobrescribe inmediatamente por su .mainNav li, .notHover { ¡estilo! De ahí que todos los estilos en el forHover están tachados.

¡Tu CSS está chocando!

Se está agregando una solución rápida sucia !important de las personas acusadas injustamente llamadas forHover estilos, eso debería hacer que funcionen, pero es una solución sucia.

Sería mejor asignar el CSS de .mainNav li, .notHover { para sólo .notHover , asignando notHover de las personas acusadas injustamente llamadas li elementos por defecto y luego use jQuery UI's switchClass, similar a esto (el código a continuación no se ha probado, pero la sintaxis debería ser correcta): 

$('.mainNav li:not(:last-child)').hover(function () {
    $(this).switchClass("notHover", "forHover", 3000);
    return false;
}, function () {
    $(this).switchClass("forHover", "notHover", 3000);
    return false;
});

respondido 07 mar '13, 23:03

Lo está haciendo referencia, ver comentarios. - Kevin B

@kraYz: Ver respuesta actualizada. Actualicé DEMO para usar jQuery 1.9.1 y jQuery UI 1.10.1 que coinciden con las versiones que especificó en su pregunta y parece funcionar bien. Al ver que ni siquiera puede hacerlo funcionar con jQuery UI 1.9.2, tiene un problema más localizado. Tal vez algo más esté posiblemente sobrescribiendo su referencia de jQuery UI. Todas las versiones funcionan bien en jsFiddle. - ¡no

@kraYz: Algo más está interfiriendo con tu animación. Incluso cuando uso tu forHover estilo con el webkit CSS todavía funciona en la última versión de Chrome, IE10 y la última versión de FireFox. IE9 se está volviendo loco con la animación, pero todavía anima de alguna manera. jsfiddle.net/zc8Py/1 - ¡no

@KevinB: Sí, tienes razón. Lo vi en el enlace a la página real enlazada por kraYz arriba. Revisé el archivo jQuery UI y addClass: función está definida e incluida. Debería animar el color de fondo. Traté de mirar el .js archivo del sitio, pero no pude ver qué parte de la secuencia de comandos interfiere con la animación. - ¡no

@kraYz: Vea mi última edición, su CSS está chocando. .mainNav li, .notHover { CSS en style.css línea 43 está sobrescribiendo los efectos de forHover en style.css línea 51. Básicamente al pasar el cursor sobre los elementos del menú forHover se agrega pero se sobrescribe con los estilos aplicados a .mainNav li. Solución rápida: agregar !important de las personas acusadas injustamente llamadas forHover CSS y debería funcionar, pero eso es una solución sucia. - ¡no

No puede animar imágenes de fondo con los métodos de efectos de jQuery UI.

http://api.jqueryui.com/addClass/

No todos los estilos se pueden animar. Por ejemplo, no hay forma de animar una imagen de fondo. Cualquier estilo que no se pueda animar se cambiará al final de la animación.

respondido 07 mar '13, 23:03

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.