jquery addClass / removeClass nem sempre funciona quando “velocidade” é definido (eventos de mouse)

Question

Na classe css "employee_mouseover" Eu faço o bg cor vermelha.

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

Esta multa funciona.

Mas, quando eu definir a velocidade para torná-la mais bonita, as estadias elemento vermelho quando eu rapidamente fazer um mouseenter + mouseleave;

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

Esta não funciona bem, a menos que eu entrar e sair do elemento muito lentamente.

Existe uma maneira melhor de fazer isso?

Agradecemos antecipadamente.

Answer 1

Pode ser feito, mas você precisa instalar o jquery coloranimate plug-in . Então você pode usar o código abaixo para mudar a cor lentamente:

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

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

Answer 2

jQuery UI docs :

O núcleo efeitos jQuery UI estende a API classe base para ser capaz de animar entre duas classes diferentes. Os métodos seguintes são alteradas. Eles agora aceitam três parâmetros adicionais: velocidade, facilitando (opcional), e retorno.

Assim @Thomas deve ter incluído as duas bibliotecas jQuery e jQuery UI em sua página, permitindo que os parâmetros de velocidade e de retorno de chamada para addClass e removeClass.

Answer 3

Você está usando o evento errado. Você quer:

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

E não há nenhum argumento de velocidade em Adicionar ou Remover classe.

Answer 4

Sim, fazê-lo em CSS!

.employee:hover{background:pink;}

Além disso, não há velocidade parameted para addClass , velocidade só existe para efeitos.

Answer 5

Há um parâmetro de duração para removeClass (http://docs.jquery.com/UI/Effects/removeClass), mas ele não está funcionando no FF. Há algo de errado com o meu código? Eu sou novo para JQuery. Eu vou tentar animar função agora.

O que estou tentando fazer aqui é usar as âncoras e, em seguida, destacar a localização âncora de destino quando a âncora é clicado. Aqui está o meu código HTML -

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

O meu destino âncora é -

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

Este é o lugar onde eu poderia a cor do fundo para mudar.

Aqui é o meu CSS -

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

Aqui está o meu 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 é para adicionar classes CSS para elementos. Se você estiver olhando para alterar algumas propriedades CSS por interpolação, então você precisa fazer isso explicitamente usando Efeitos .

O seu código:

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

Irá adicionar duas classes, employee_mouseover e fast para this, o que obviamente não é o que você está depois.

Answer 7

Aqui está a minha transição com 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

Mesmo se você incluir jQueryUI corretamente, todos estes parecem falhar fora do FF quando você usar o parâmetro "duração". Causa erros JS no IE. Eu iria ficar para animar (), que é uma porcaria.

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

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

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

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

Não há nenhuma nota desta nos docs no site jqueryui.

Answer 9

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

Answer 10

Você pode usar transições CSS3 para conseguir este efeito.

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

Além disso, não há nenhuma velocidade parameted para addClass, velocidade só existe para efeitos.

correta.

Mas talvez este poder Plugin ajuda:

animar-se classe