it-swarm.com.de

Animieren von addClass / removeClass mit jQuery

Ich verwende jQuery und jQuery-ui und möchte verschiedene Attribute für verschiedene Objekte animieren.

Um das Problem hier zu erläutern, habe ich es auf einen div vereinfacht, der von blau nach rot wechselt, wenn der Benutzer darüber mauset.

Ich kann das gewünschte Verhalten bei der Verwendung von animate() erzielen. Dabei müssen sich die von mir animierten Stile jedoch im Animationscode befinden und von meinem Stylesheet getrennt sein. (siehe Beispiel 1)

Eine Alternative ist die Verwendung von addClass() und removeClass(), aber ich konnte nicht genau das Verhalten wiederherstellen, das ich mit animate() erreichen kann. (siehe Beispiel 2)


Beispiel 1

Werfen wir einen Blick auf den Code, den ich mit animate() habe:

$('#someDiv')
  .mouseover(function(){
    $(this).stop().animate( {backgroundColor:'blue'}, {duration:500});
  })
  .mouseout(function(){
    $(this).stop().animate( {backgroundColor:'red'}, {duration:500});
  });

es zeigt alle Verhaltensweisen an, nach denen ich suche:

  1. Animiert reibungslos zwischen Rot und Blau.
  2. Keine Animationsüberlastung, wenn der Benutzer die Maus schnell in das div hinein- und aus dem div herausbewegt.
  3. Bewegt der Benutzer die Maus während des Abspielens der Animation nach außen/innen, wird die Bewegung zwischen dem aktuellen Status "Auf halbem Weg" und dem neuen Status "Ziel" korrekt fortgesetzt.

Da die Stiländerungen jedoch in animate() definiert sind, muss ich die Stilwerte dort ändern und darf nicht einfach auf mein Stylesheet verweisen. Diese "Fragmentierung" der Definition von Stilen ist etwas, das mich wirklich stört.


Beispiel 2

Hier ist mein momentan bester Versuch, addClass() und removeClass zu verwenden (beachte, dass du jQuery-ui brauchst, damit die Animation funktioniert):

//assume classes 'red' and 'blue' are defined

$('#someDiv')
  .addClass('blue')
  .mouseover(function(){
    $(this).stop(true,false).removeAttr('style').addClass('red', {duration:500});
  })
  .mouseout(function(){
    $(this).stop(true,false).removeAttr('style').removeClass('red', {duration:500});
  });

Dies zeigt sowohl Eigenschaft 1. als auch 2. meiner ursprünglichen Anforderungen, jedoch funktioniert 3 nicht.

Ich verstehe den Grund dafür:

Beim Animieren von addClass() und removeClass() fügt jQuery dem Element einen temporären Stil hinzu und erhöht dann die entsprechenden Werte, bis sie die Werte der angegebenen Klasse erreichen, und erst dann fügt es tatsächlich hinzu/entferne die Klasse.

Aus diesem Grund muss ich das style-Attribut entfernen. Andernfalls bleibt das style-Attribut erhalten, wenn die Animation zur Hälfte angehalten wird, und überschreibt alle Klassenwerte dauerhaft, da style-Attribute in einem Tag eine höhere Bedeutung als Klassenstile haben.

Wenn die Animation jedoch zur Hälfte fertig ist, wurde die neue Klasse noch nicht hinzugefügt. Bei dieser Lösung springt die Farbe auf die vorherige Farbe, wenn der Benutzer die Maus bewegt, bevor die Animation abgeschlossen ist.


Ich möchte im Idealfall in der Lage sein, so etwas zu tun:

$('#someDiv')
  .mouseover(function(){
    $(this).stop().animate( getClassContent('blue'), {duration:500});
  })
  .mouseout(function(){
    $(this).stop().animate( getClassContent('red'), {duration:500});
  });

Wobei getClassContent nur den Inhalt der angegebenen Klasse zurückgeben würde. Der entscheidende Punkt ist, dass ich auf diese Weise meine Stildefinitionen nicht überall behalten muss, sondern sie in Klassen in meinem Stylesheet behalten kann.

214
Johannes

Da Sie sich keine Gedanken über den Internet Explorer machen, können Sie mit CSS-Übergängen die Animation und mit jQuery die Klassen ändern. Live-Beispiel: http://jsfiddle.net/tw16/JfK6N/

#someDiv{
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
301
tw16

Eine andere Lösung (die jedoch jQueryUI erfordert, wie von Richard Neil Ilagan in den Kommentaren ausgeführt):

addClass, removeClass und toggleClass akzeptieren auch ein zweites Argument. die Zeitdauer, um von einem Zustand in den anderen zu gelangen.

$(this).addClass('abc',1000);

Siehe jsfiddle: - http://jsfiddle.net/6hvZT/1/

89
Omar Tariq

Sie könnten jquery uis switchClass verwenden, hier ein Beispiel:

$( "selector" ).switchClass( "oldClass", "newClass", 1000, "easeInOutQuad" );

Oder sieh dir das an jsfiddle .

37
by0

Du brauchst nur den jQuery UI effects-core (13KB), um die Dauer des Hinzufügens zu aktivieren (genau wie Omar Tariq, auf den es hingewiesen hat)

12
Patrick

Ich habe das untersucht, wollte aber eine andere Übergangsrate für rein und raus haben.

Dies ist, was ich getan habe:

//css
.addedClass {
    background: #5eb4fc;
}

// js
function setParentTransition(id, prop, delay, style, callback) {
    $(id).css({'-webkit-transition' : prop + ' ' + delay + ' ' + style});
    $(id).css({'-moz-transition' : prop + ' ' + delay + ' ' + style});
    $(id).css({'-o-transition' : prop + ' ' + delay + ' ' + style});
    $(id).css({'transition' : prop + ' ' + delay + ' ' + style});
    callback();
}
setParentTransition(id, 'background', '0s', 'ease', function() {
    $('#elementID').addClass('addedClass');
});

setTimeout(function() {
    setParentTransition(id, 'background', '2s', 'ease', function() {
        $('#elementID').removeClass('addedClass');
    });
});

Dadurch wird die Hintergrundfarbe sofort auf # 5eb4fc gesetzt und langsam innerhalb von 2 Sekunden auf den Normalwert zurückgesetzt.

Hier ist ein Geige

4
Tj Gienger

Obwohl die Frage ziemlich alt ist, füge ich Informationen hinzu, die in anderen Antworten nicht vorhanden sind.

Das OP verwendet stop (), um die aktuelle Animation zu stoppen, sobald das Ereignis abgeschlossen ist. Es sollte jedoch hilfreich sein, die richtige Mischung von Parametern mit der Funktion zu verwenden. z.B. stop (true, true) oder stop (true, false), da dies sich gut auf die in der Warteschlange befindlichen Animationen auswirkt.

Der folgende Link zeigt eine Demo, in der die verschiedenen mit stop () verfügbaren Parameter und deren Unterschiede zu finish () dargestellt sind.

http://api.jquery.com/finish/

Obwohl das OP keine Probleme mit JqueryUI hatte, ist dies für andere Benutzer gedacht, die möglicherweise auf ähnliche Szenarien stoßen, JqueryUI jedoch nicht verwenden können/IE7 und 8 ebenfalls unterstützen müssen.

2
Anurag