jQuery switchClass

Question

Ist es möglich, einen switchClass Übergang rückgängig zu machen?

würde ich ein Element gerne langsam Klasse A, wie Sie schweben über sie erhalten, und es langsam wieder verlieren, sobald die Maus weg bewegt hat. Allerdings scheint die Funktion glitchy zu sein, und .stop(0,1) Aufruf scheint nicht zu helfen. In der Tat scheint es, es zu brechen.

Ich habe ein anschauliches Beispiel hier . Ja, es ist eine 404-Seite, aber das ist nicht wichtig. Die Navigation sollte langsam sein zu gewinnen oder eine Klasse zu verlieren, aber es springt nur. Das Skript kann hier .

Ist ein solcher Übergang möglich?

EDIT:

Hier ist der Code verwende ich:

$('#navbar li:not(.current) a').hover(function() {
    $(this).parent()
        .stop(1,0)
        .addClass('current', 1000);
}, function () {
    $(this).parent()
        .stop(1,0)
        .removeClass('current', 1000);
});

Ist es vielleicht, weil die Klasse des li ändert sich nicht im Stil der Kinder führt transitioned zu werden?

EDIT2:

Yup, das 'fixed' es. Der wahre Fehler kann nun in seiner ganzen Pracht zu beobachten (in einem Zwischenzustand eingefroren zu werden).

Answer 1

Dies ist die nächste, die ich gekommen bin, es zu machen arbeiten:

Beispiel: http://jsfiddle.net/TUrvP/

Es kann etwas zu viel des Guten, und Sie können den :animated Selektor verwenden können, obwohl ich anfangs Probleme hatte.

Mai nicht lohnt die Mühe ...

HTML

<div id='myElement' class='blue'>content</div>

CSS

div {
    width: 100px;
    height: 100px;
}

.blue {
    background: blue;
    position:relative;
    left: 20px;
}
.myClass {
    background:red;
    margin-top: 50px;
}

jQuery

var animating = false;
var interval;
$('#myElement').hover(
    function() {
        var $th = $(this);
        if(!animating && !interval) {
            $th.clearQueue();
            animating = true;
            $th.addClass('myClass',500,function() {animating=false;});
        }
    },
    function() {
            var $th = $(this);
            if(interval) return false;
            if(animating) {
                interval = setInterval(function() {
                                            if(!animating) {
                                                $th.clearQueue();
                                                animating = true;
                                                $th.removeClass('myClass',500, function(){animating = false;});
                                                clearInterval(interval);
                                                interval = null;
                                            }},50)
            } else {
                $th.clearQueue();
                $th.removeClass('myClass',500, function(){animating = false;});
            }
        }
);

Answer 2

Es sieht aus wie Sie für irgendeine Form von .animate Funktion von jQuery suchen.

$('#clickme').hover(function() { $('#book').animate({ opacity: 0.25, left: '+=50', height: 'toggle' }, 5000, function() { // Animation complete. }); });

Ansonsten wechseln Klasse tut langsam viel Sinn für mich macht

Answer 3

Es macht keinen Sinn, zu langsam, eine Klasse zu erhalten. Ein Element hat entweder eine bestimmte Klasse oder nicht, und CSS bietet keine Möglichkeit, eine Art „Teil Inklusion“ in einer Klasse anzuzeigen.

Bearbeiten - @patrick weist darauf hin, dass jQuery UI in der Tat, dass nicht unterstützt, zumindest bis zu einem gewissen Grad. Die Klasse-Manipulation Funktionen übernehmen eine Dauer Argument, wenn Sie die Effekte Sachen installieren.