jQuery .addClass y .fadeIn?

Question

Por lo tanto, tengo estos elementos h1 que son enlaces y quiero agregarles una clase y desvanecer esa clase una vez que el elemento se ha sobrevolado, y luego onMouseOut quitar la clase, mientras se desvanece la clase. Pero usar la función de fundido no hace nada por mí. Viendo como oculta el elemento. ¿Algunas ideas?

jQuery(".categories h1 a").hover(
function() { 
    jQuery(this).fadeIn("slow").addClass("active"); 
}, 
function(){ 
    jQuery(this).fadeOut("slow").removeClass("active"); 
}); 
}); 

¡Gracias!

EDITAR :::

jQuery("h1").hover(function() { 
     jQuery(this).stop().animate({ backgroundColor: "#a7bf51"}, 800); 
     },function() { 
     jQuery(this).stop().animate({ backgroundColor: "#FFFFFF"}, 800); 
     }); 
}); 

Answer 1

Intente utilizar jQuery UI .addClass y .removeClass.

$(function() { 
    $(".categories h1 a").hover(function() { 
     $(this).stop(true,true).addClass("active", 500); 
    }, function() { 
     $(this).stop(true,true).removeClass("active", 100); 
    });  
}); 

DEMO (Por alguna razón, no se anima correctamente (fade) por primera vez .. pero entonces hacia adelante que funciona bien)

Editar: Actualizado para la integridad.

También puede usar .animate para obtener el efecto deseado.Véase más adelante,

$(function() { 
    $(".categories h1 a").hover(function() { 
     $(this).stop().animate({ 
      backgroundColor: "#a7bf51" 
     }, 800); 
    }, function() { 
     $(this).stop().animate({ 
      backgroundColor: "#FFFFFF" 
     }, 800); 
    }); 

}); 

DEMO

Answer 2

suena como usted quiere que los estilos de la clase que se desvanecen en Usted debe mirar en animado() para que:.

fadeIn simplemente se desvanece en el elemento.

Answer 3

No creo que pueda cruzar el fundido entre clases, pero puede usar la función animate. animate le permite afectar cualquier variable CSS durante un tiempo especificado.

sé que elimina parte de estilo del archivo css, pero de nuevo, no creo jQuery cruzará fundido entre clases.

Answer 4

Si tiene la biblioteca jQuery UI cargada, puede establecer un parámetro adicional para la función toggleClass.

Establezca su opacidad a través de css.

h1 a { 
    opacity:0.8; 
} 

h1 a.hovered { 
    opacity: 1.0; 
} 

entonces

jQuery(".categories h1 a").hover(function(e) { 
    $(this).toggleClass('hover', 1000); 
} 

El 1000 es el contador de milisegundos en el evento. Por lo tanto, el efecto debe desvanecerse a 1.0 opacidad cuando se coloca en un segundo y desaparecer en 1 segundo cuando no está suspendido.

Answer 5

probar esto, y aquí está la jsFiddle (enter link description here):

<script type="text/javascript"> 
    jQuery(".categories h1").hover(function() { 
      jQuery(this).stop().animate({ "background-color": "#a7bf51"}, 800); 
      jQuery(this).addClass("active"); 
      jQuery(this).find("a").fadeIn("slow"); 
     }, 
     function() { 
      jQuery(this).stop().animate({ "background-color": "#FFFFFF"}, 800); 
      jQuery(this).addClass("active"); 
      jQuery(this).find("a").fadeOut("slow"); 
    }); 
</script> 
<style type="text/css"> 
    .categories h1 { 
     background-color: rgb(200, 200, 200); 
     display: block; 
     padding: 5px; 
     margin: 5px; 
     width: 100px 
    } 
    .categories h1 a { 
     display: none; 
    } 
</style> 
<div class="categories"> 
    <h1><a href="#">Item 1</a></h1> 
    <h1><a href="#">Item 2</a></h1> 
    <h1><a href="#">Item 3</a></h1> 
</div>​ 

Answer 6

Si usted no desea usar jQuery UI, ya que será una carga adicional, puede haga lo siguiente:

(me fue útil cuando la clase de rutina 'oculta' se usa en mi aplicación)

Fundir lentamente mientras se quita la clase:

$('.myClass').removeClass('hidden').fadeOut(0).fadeIn(10000) 

Fade Out lentamente, añadir la clase y luego se desvanecen de nuevo en:

$('.myClass').fadeOut(1000, function(){ 
    $(this).addClass('hidden'); //or any other class 
}).fadeIn(10000) 

esperanza de que esto va a simplificar la tarea de alguien!