jquery addclass / removeclass non funziona sempre quando è impostata la "velocità" (eventi del mouse)

Question

Nella classe css " employee_mouseover " Rendo il colore bg rosso.

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

Funziona bene.

Ma quando imposto una velocità per renderlo più bello, l'elemento rimane rosso quando faccio rapidamente un mouseenter + mouseleave;

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

Questo non funziona bene, a meno che non mi muova dentro e fuori dall'elemento molto lentamente.

C'è un modo migliore per farlo?

Grazie in anticipo.

Answer 1

Può essere fatto, ma è necessario installare il jquery coloranimate plugin . Quindi puoi usare il codice qui sotto per cambiare lentamente il colore:

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

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

Answer 2

dai documenti dell'interfaccia utente jQuery :

  

Il core degli effetti dell'interfaccia utente jQuery estende l'API della classe base per poter animare tra due classi diverse. I seguenti metodi sono cambiati. Ora accettano tre parametri aggiuntivi: speed, easing (opzionale) e callback.

Quindi @Thomas deve aver incluso entrambe le librerie dell'interfaccia utente jQuery e jQuery sulla sua pagina, consentendo ai parametri speed e callback di aggiungereClass e removeClass.

Answer 3

Stai utilizzando l'evento sbagliato. Vuoi:

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

E non c'è alcun argomento sulla velocità per aggiungere o rimuovere la classe.

Answer 4

Sì, fallo in CSS!

.employee:hover{background:pink;}

Inoltre, non esiste una velocità parametrizzata per addClass , la velocità esiste solo per gli effetti.

Answer 5

Esiste un parametro di durata per removeClass (http://docs.jquery.com/UI/Effects/removeClass), ma non funziona in FF. C'è qualcosa di sbagliato nel mio codice? Sono nuovo di JQuery. Proverò ora la funzione di animazione.

Quello che sto cercando di fare qui è usare le ancore e quindi evidenziare la posizione dell'ancora di destinazione quando si fa clic sull'ancora. Ecco il mio codice HTML -

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

Il mio ancoraggio di destinazione è -

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

Qui è dove potrei cambiare il colore di sfondo.

Ecco il mio CSS -

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

Ecco il mio codice JQuery -

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

Answer 6

addClass serve per aggiungere classi CSS agli elementi. Se stai cercando di modificare alcune proprietà CSS mediante l'interpolazione, devi farlo esplicitamente utilizzando Effetti .

Il tuo codice:

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

Aggiungerà due classi, employee_mouseover e fast a this , che ovviamente non è quello che stai cercando.

Answer 7

Ecco la mia transizione 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

Anche se includi correttamente JqueryUI, tutti questi sembrano fallire al di fuori di FF quando usi la "durata" parametro. Provoca errori JS in IE. Vorrei attenermi ad animate () che fa schifo.

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

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

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

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

Non c'è nota di ciò nei documenti sul sito jqueryui.

Answer 9

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

Answer 10

È possibile utilizzare le transizioni CSS3 per ottenere questo effetto.

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

Inoltre, non esiste una velocità parametrizzata per addClass, la velocità esiste solo per gli effetti.

Una corretta.

Ma forse questo plugin potrebbe aiutare:

animate-to-class