Wenn die jQuery-Animation mit fadeIn() nicht mag

Dienstag, 9. Dezember, 2014

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:

  1. Verena Berger

    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.