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

Question

En css class " employee_mouseover " Hago el color rojo bg.

        $(".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 en rojo cuando hago un mouseenter + una llave de ratón;

    $(".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 me mueva dentro y fuera del elemento muy lentamente.

¿Hay una mejor manera de hacer esto?

Gracias de antemano.

Answer 1

Se puede hacer, pero debe instalar el complemento coloranimate jquery . Luego, puede usar el siguiente código para cambiar el color lentamente:

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

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

Answer 2

de la documentos de la interfaz de usuario de jQuery :

  

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

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

Answer 3

Estás usando el evento incorrecto. Quieres:

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

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

Answer 4

Sí, ¡hazlo en CSS!

.employee:hover{background:pink;}

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

Answer 5

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

Lo que estoy tratando 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 ancla de destino es -

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

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

Aquí está mi CSS -

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

Aquí está mi código JQuery -

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

Answer 6

addClass es para agregar clases de CSS a los elementos. Si está buscando cambiar alguna propiedad de CSS mediante la interpolación, debe hacerlo explícitamente utilizando Efectos .

Tu código:

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

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

Answer 7

Aquí está 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");
        });
    }
);

Answer 8

Incluso si incluyes JqueryUI correctamente, parece que todos estos fallan fuera de FF cuando usas la " duración " parámetro. 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 ninguna nota de esto en los documentos del sitio jqueryui.

Answer 9

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

Answer 10

Puedes usar 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

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

Correcto.

Pero quizás este complemento pueda ayudar:

animate-to-class