Folgende Situation: eine Animation wie fadeIn(666) ändert die Sichtbarkeit über Inline-Styles. Das style-Attribut wird also am Beginn der Animation auf opacity:0 gesetzt und über 666 Sekunden auf opacity:1 interpoliert. Logisch bis hierher.
Das Problem ist, dass das style-Attribut so bestehen bleibt. D.h. wenn ich dem Element jetzt eine Klasse .see-through {opacity:0.5;} über $element.addClass(‘see-through’) zuweise, ändert sich nichts. Das style-Attribut ist spezifischer und überschreibt deswegen die Angabe der Klasse.
Es gibt verschiedene Lösungsansätze.
Lösung 1: opacity hart coden (Achtung Spoiler: bloß nicht)
Der einfachste: die opacity einfach per jQuery hart reinsetzen. Also $element.css(‘opacity’, 0.5).
Gar nicht schön. Löst das Problem für den Moment, erzeugt aber nur weitere Probleme und ist absolut reudig wartbar. Was, wenn ich die Klasse .see-through auf opacity:0.75 ändern möchte? Dann muss ich dran denken auch im JavaScript alle opacity-Werte zu korrigieren. No way.
Lösung 2: important! als Allzweckwaffe
Nächste Möglichkeit ist die CSS-Klasse einfach spezifischer zu machen, d.h. mit important! zu deklarieren:
.see-through {opacity:0.5 !important;}
Das ist okay-ish, da besser wartbar. Eigentlich ist es aber Best Practice important! wo es geht zu vermeiden. Das Problem ist, dass CSS-Dateien bei größer werdenden Projekten schwerer zu handlen werden. Da bedarf es viel Disziplin und einer von Anfang an gut durchdachten Struktur.
Die Spezifität zu erhöhen mag für diesen Fall gewollt sein, im nächsten vielleicht schon nicht mehr. Und dann, liebe Leser, geht die Sucherei und Flucherei los. Dann gilt es zuerst herauszufinden, wo das Fehlverhalten herkommt, und anschließend will es behoben werden. Und spätestens dann müsst ihr eh noch mal ran un euren Code refactoren. Darum machen wir es lieber gleich richtig.
Lösung 3: leerer String in der css()-Methode
Ist sogar in der offiziellen API dokumentiert:
Setting the value of a style property to an empty string — e.g.
$(‘#mydiv’).css(‘color’, ’’)— removes that property from an element if it has already been directly applied, whether in the HTML style attribute, through jQuery’s.css()method, or through direct DOM manipulation of thestyleproperty.
Angenommen wir wollen den opacity-Wert aus dem style-Attribut entfernen, nachdem die fadeIn()-Animation komplett ist, einfach folgenden Code verwenden:
$element.fadeIn(666, function(){
$element.css('opacity', '');
});
Kein Konflikt mit CSS-Dateien, wunderbare Wartbarkeit. Einmal mehr danke StackOverflow 😉
