jquery AddClass / removeClass funktioniert nicht immer, wenn „Geschwindigkeit“ gesetzt (Mausereignisse)

Question

In CSS-Klasse "employee_mouseover" Ich habe die BG-Farbe rot zu machen.

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

Das funktioniert gut.

Aber wenn ich eine Geschwindigkeit eingestellt, um es schöner aussehen zu machen, bleibt das Element rot, wenn ich eine MouseEnter- + mouseleave schnell tun;

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

Das funktioniert nicht gut, wenn ich nur sehr langsam in und aus dem Elemente bewegen.

Gibt es einen besseren Weg, dies zu tun?

Vielen Dank im Voraus.

Answer 1

Es kann getan werden, aber Sie müssen die jquery coloranimate Plugin installieren. Dann können Sie den Code verwenden, unter der Farbe zu ändern langsam:

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

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

Answer 2

vom jQuery UI docs :

  

Die jQuery UI-Effekte Kern erweitert die Basisklasse API der Lage sein, zwischen zwei verschiedenen Klassen zu animieren. Die folgenden Verfahren werden geändert. Sie nehmen jetzt drei zusätzliche Parameter: Geschwindigkeit, Lockerung (optional), und Rückruf.

So @Thomas muß beide jQuery und jQuery UI-Bibliotheken auf seiner Seite enthalten ist, so dass die Geschwindigkeit und Callback-Parameter addClass und removeClass.

Answer 3

Sie verwenden das falsche Ereignis. Sie wollen:

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

Und es gibt kein Geschwindigkeits Argument auf Hinzufügen oder Klasse entfernen.

Answer 4

Ja, tun Sie es in CSS!

.employee:hover{background:pink;}

Auch keine Geschwindigkeits für addClass parameted ist, Geschwindigkeit existiert nur für Effekte.

Answer 5

Es gibt eine Dauer Parameter für removeClass (http://docs.jquery.com/UI/Effects/removeClass), aber es funktioniert nicht in FF. Gibt es etwas falsch mit meinem Code? Ich bin neu in JQuery. Ich werde Funktion nun versuchen animieren.

Was ich versuche, hier zu tun ist, um die Anker zu verwenden und markieren Sie dann den Zielanker Lage, wenn der Anker geklickt wird. Hier ist mein HTML-Code -

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

Mein Ziel Anker ist -

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

Dies ist, wo ich kann die Hintergrundfarbe zu ändern.

Hier ist mein CSS -

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

Hier ist mein JQuery-Code -

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

Answer 6

addClass ist CSS-Klassen-Elemente hinzuzufügen. Wenn Sie schauen, um einige CSS-Eigenschaft von tweening zu ändern, dann müssen Sie das explizit tun mit Effects .

Ihr Code:

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

Werden zwei Klassen hinzufügen, employee_mouseover und fast this, was offensichtlich ist nicht, was Sie nach.

Answer 7

Hier ist mein Übergang mit 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

Auch wenn Sie jQueryUI richtig sind, diese alle erscheinen außerhalb von FF zum Scheitern verurteilt, wenn Sie die „Dauer“ Parameter verwenden. Verursacht JS Fehler im Internet Explorer. Ich würde Stick zu animieren (), die saugt.

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

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

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

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

Es gibt keine Kenntnis von diesem in der Dokumentation auf der jQueryUI Website.

Answer 9

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

Answer 10

Sie können CSS3 Übergänge verwenden, um diesen Effekt zu erzielen.

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

Auch gibt es keine Geschwindigkeits parameted für addClass, Geschwindigkeit existiert nur für Effekte.

Richtig.

Aber vielleicht könnte dieses Plugin helfen:

animieren-to-Klasse