elementos de desvanecimiento de jQuery de una clase a otra, en el vuelo

Question

¿se puede hacer esto?

para, por ejemplo.

.class1{ 
    background-image:(whatever.jpg) 
    color: #fff; 
} 

.class2{ 
    background-image:(whatever2.jpg) 
    color: #999; 
} 

puedo desvanecen todos los elementos que tienen clase 1 a clase 2 cuando el ratón está sobre el elemento, y de vuelta a clase 1 cuando el ratón está fuera?

Answer 1

Si das tanto la misma posición absoluta, utilizando fadeIn() y fadeOut() tendrá este efecto (que se adjunta a onmouseover y onmouseout).

Answer 2

Creo que this plugin es lo que estás buscando. Te permite animar entre clases. Por ejemplo:

$('.class1').animateToClass('.class2', 1000); 

Answer 3

Eche un vistazo a jQuery UI's extension to addClass. Permite un parámetro de duración para dar la posibilidad de animación.

aquí, creo que usted quiere hacer algo como esto:

$('.class1').hover(function(){ 
    $(this).addClass('class2', 800); 
}, function(){ 
    $(this).removeClass('class2', 800); 
}); 

Obviamente se tendrá que instalar jQuery UI para esto.

Answer 4

creo que esto podría ayudar completo a usted ....

$('.class1').mouseover(function() { 
    $(this).toggleClass('class2'); 
}); 

Answer 5

Si no desea utilizar un plugin, puede hacer lo siguiente:

$(".class1").hover(
function() { 
    $(this).fadeOut(function() { 
     $(this).removeClass("class1").addClass("class2").fadeIn('fast'); 
    }); 
}, 
function() { 
    $(this).fadeOut(function() { 
     $(this).removeClass("class2").addClass("class1").fadeIn('fast'); 
    }); 
}); 

Answer 6

Este es mi implementación:

 $(this).fadeOut("fast"); or $(this).hide(); 
     $(this).removeClass('css1').addClass('css2'); 
$(this).fadeIn("slow");