Wenn die jQuery-Animation mit fadeIn() nicht mag
Ach, meine Kollegen… wo denn meine Weihnachtskarte bliebe, wurde ich gefragt…
Dabei bin ich doch dran!! Vor 3 Wochen war die Musik fertig. Die Idee für Grafik und Animation steht auch … an der Umsetzung bin ich just dabei. Und hier stiess auf eine Merkwürdigkeit: In jQuery gibt es die Möglichkeit, mit der fadeIn Funktion etwas schööön sanft einblenden zu lassen:
$('#content').fadeIn(5000);
Ich hab die Funktion so oft genutzt - aber bei diesem Element ging es einfach nicht. Plopp - mein Element war sofort da.
Ursache: die CSS-Definition dieser ID - diese enthielt ein transition Attribut:
#content{ (...) transition: all 1s ease-in-out; (...) }
… tja, und wenn ein solches existiert, dann funktioniert eine jQuery-Animation nicht.
Abhilfe:
Entweder:
- In der CSS Deklaration entfernt man die Definition für transition.
- erst nach der gewünschten Animation setzt man transition:
$('#content').css('transition', 'all 1s ease-in-out');
Oder: man verwirft fadeIn() und macht es rein mit CSS3: man setzt per transition die Zeitdauer und wechselt den Wert von opacity.
Weiterführende Links:
Kommentar hinzufügen
Die Felder Name und Kommentar sind Pflichtfelder.
Sonntag, Januar 14, 2018 - 17:29:54
Vielen Dank! Ich bin beinahe verzweifelt, weil bei mir fadeIn und fadeOut nicht funktionierten! Aber dann bin ich auf diese Seite gestossen - > und jetzt klappt alles wie gewünscht.