jquery addclass/removeclass no siempre funciona cuando se establece "velocidad" (eventos del mouse)

Question

En la clase css "employee_mouseover" hago que el color bg sea rojo.

 $(".employee").bind("mouseenter", function() { 
      $(this).addClass("employee_mouseover"); 
     }); 
     $(".employee").bind("mouseleave", function() { 
      $(this).removeClass("employee_mouseover"); 
     }); 

Esto funciona bien.

Pero, cuando configuro una velocidad para que se vea más bonita, el elemento permanece rojo cuando hago rápidamente un mouseenter + mouseleave;

$(".employee").bind("mouseenter", function() { 
     $(this).addClass("employee_mouseover", "fast"); 
    }); 
    $(".employee").bind("mouseleave", function() { 
     $(this).removeClass("employee_mouseover", "fast"); 
    }); 

Esto no funciona bien, a menos que entre y salga del elemento muy lentamente.

¿Hay una mejor manera de hacerlo?

Gracias de antemano.

Answer 1

Se puede hacer, pero debe instalar el jquery coloranimate plugin. A continuación, puede utilizar el siguiente código para cambiar el color poco a poco:

$(".employee").bind("mouseenter", function() { 
    $(this).animate({backgroundColor: "#bbccff"}, "slow"); 

}); 
$(".employee").bind("mouseleave", function() { 
    $(this).animate({backgroundColor: "white"}, "slow"); 
}); 

Answer 2

Sí, hazlo en CSS.

.employee:hover{background:pink;} 

Además, there is no speed parameted for addClass, la velocidad sólo existe para los efectos.

Answer 3

addClass es para agregar clases de CSS a los elementos. Si está buscando cambiar alguna propiedad CSS interpolando, entonces debe hacerlo explícitamente usando Effects.

Su código:

$(this).addClass("employee_mouseover", "fast"); 

añadirá dos clases, employee_mouseover y fast a this, lo que obviamente no es lo que está buscando.

Answer 4

Está utilizando el evento incorrecto. Desea:

$(".employee").hover(function() { 
$(this).addClass("employee_mouseover"); 
}, function() { 
$(this).removeClass("employee_mouseover"); 
}); 

Y no hay argumento de velocidad para agregar o quitar clases.

Answer 5

del jQuery UI docs:

los efectos núcleo de jQuery UI extiende el API de la clase base para poder animar entre dos clases diferentes. Los siguientes métodos son cambiados. Ahora aceptan tres parámetros adicionales: velocidad, aceleración (opcional) y devolución de llamada.

Así que @Thomas debe haber incluido las bibliotecas jQuery y jQuery UI en su página, lo que permite la velocidad y los parámetros de devolución de llamada para agregarClass y removeClass.

Answer 6

Además, no hay velocidad parametrada para addClass, la velocidad solo existe para los efectos.

Correcto.

Pero tal vez esto podría ayudar Plugin:

animate-to-class

Answer 7

Incluso si se incluye jQueryUI adecuadamente, estos todos parecen fallar fuera del FF cuando se utiliza el parámetro "duración". Causa errores JS en IE. Me quedaría con animate() que apesta.

http://jqueryui.com/docs/addClass/

http://jqueryui.com/docs/removeClass/

http://jqueryui.com/docs/switchClass/

http://jqueryui.com/docs/toggleClass/

No hay nota de esto en los documentos en el sitio jqueryui.

Answer 8

$(".employee").hover(function() { 
    $(this).stop().animate({ backgroundColor: "#bbccff" }, "slow"); 
}, function() { 
    $(this).stop().animate({ backgroundColor: "white" }, "slow"); 
}); 

Answer 9

hay un parámetro de duración para removeClass (http://docs.jquery.com/UI/Effects/removeClass), pero no funciona en FF. ¿Hay algo mal con mi código? Soy nuevo en JQuery. Voy a probar la función de animación ahora.

Lo que trato de hacer aquí es usar los anclajes y luego resaltar la ubicación del ancla de destino cuando se hace clic en el ancla. Aquí está mi código HTML -

<ul> 
       <li><a href="#caricatures">Caricatures</a></li> 
       <li><a href="#sketches">Sketches</a></li> 
</ul> 

Mi destino es el ancla -

<a href="#" id="caricatures"><h3>Caricatures</h3></a> 

Aquí es donde podría el color de fondo para cambiar.

Aquí es mi CSS -

<style> 
      .spotlight{ 
       background-color:#fe5; 
      } 
</style> 

Aquí está mi código de jQuery -

<script> 
    $('a[href$="caricatures"]').click(function(){ 
     $('a[id="caricatures"] h3').addClass("spotlight"); 
     $('a[id="caricatures"] h3').removeClass("spotlight",1000); 
    }); 
    </script> 

Answer 10

Puede utilizar las transiciones CSS3 para lograr este efecto.

a:hover { 
    color: red; 
    -webkit-transition: 1s color linear; 
    -moz-transition: 1s color linear; 
} 

a:link, a:visited { 
    color: white; 
    -webkit-transition: 1s color linear; 
    -moz-transition: 1s color linear; 
} 

Answer 11

Aquí es mi transición con jQuery:

$("#layoutControl .actionList").click(
    function(){ 
     $("#assetsContainer").fadeOut("fast",function(){ 
      $(this).removeClass("assetsGrid").addClass("assetsList"); 
      $("#iconList").attr("src", "/img/bam/listIcon.png"); 
      $("#iconGrid").attr("src", "/img/bam/gridIconDim.png"); 
      $(this).fadeIn("fast"); 
     }); 
    } 
);