Ich versuche, den HTML-Teil eines Tags zu animieren ( <font id="test" size="7">This Text!</font> ) mit der Animate-Funktion von jQuery wie folgt:
$("#test").delay(1500).animate({text:'The text has now changed!'},500);
Es passiert jedoch nichts, es ändert den Text nicht.
Wie kann ich das machen? Vielen Dank!
Wenn Sie den Text „reibungslos“ ändern möchten, können Sie zwei verwenden <span>s überlappen und etwas arbeiten. Oder wenn Sie nur Text „sofort“ ändern möchten, können Sie verwenden .text(). PS: Sie können verwenden <span style=".."> für Styling statt <font ..>.
Nochmals, Down Voters überall, ich habe diesen Code in der Produktion mit leichten Modifikationen verwendet. +1. Abwähler: Bitte testen Sie jeden Code, bevor Sie abstimmen. beleidigend!
– wpcoder
3. November 2017 um 23:34 Uhr
@wpcoder Ich habe nicht über diese Antwort abgestimmt, aber ich gehe davon aus, dass sie abgelehnt wurde, weil sie nur Code ohne Erklärung zeigt. Einige Benutzer stimmen Antworten ohne Erklärung als Antwort von geringer Qualität ab.
– Modus Tollens
3. November 2017 um 23:38 Uhr
Der Punkt ist; Dosis dieser Antwort helfen oder nicht, und es hat mir geholfen, hat sich gerade geändert .show(1000) und es hat funktioniert.
– wpcoder
4. November 2017 um 2:02 Uhr
Mit einem FadeIn-FadeOut erscheint Hide-Show am glattesten, ist aber eine nette Lösung
– Leonardo Sapuy
28. Februar 2018 um 21:29 Uhr
Siehe Davions Antwort in diesem Beitrag: https://stackoverflow.com/a/26429849/1804068
HTML:
<div class="parent">
<span id="mySpan">Something in English</span>
</div>
JQUERY
$('#mySpan').animate({'opacity': 0}, 400, function(){
$(this).html('Something in Spanish').animate({'opacity': 1}, 400);
});
Ich habe eine jsFiddle erstellt, die “reibungslos” zwischen zwei Spannen übergeht, falls jemand daran interessiert ist, dies in Aktion zu sehen. Sie haben zwei Hauptoptionen:
eine Spanne wird ausgeblendet zur gleichen Zeit wie die andere Spanne wird eingeblendet
eine Spanne wird ausgeblendet gefolgt von die andere Spanne wird eingeblendet.
Wenn Sie zum ersten Mal auf die Schaltfläche klicken, wird Nummer 1 oben angezeigt. Beim zweiten Klicken auf die Schaltfläche wird Nummer 2 angezeigt. (Ich habe dies getan, damit Sie die beiden Effekte visuell vergleichen können.)
Nummer 1 oben (der schwierigere Effekt) wird erreicht, indem die Spans per CSS mit absoluter Positionierung direkt übereinander positioniert werden. Außerdem sind die jQuery-Animationen nicht miteinander verkettet, sodass sie gleichzeitig ausgeführt werden können.
Wenn Sie nur den Text ändern möchten, können Sie genau das tun, was Kevin gesagt hat. Wenn Sie jedoch versuchen, eine Animation auszuführen und den Text zu ändern, können Sie dies erreichen, indem Sie zuerst den Text ändern und dann Ihre Animation ausführen.
Zum Beispiel:
$("#test").html('The text has now changed!');
$("#test").animate({left: '100px', top: '100px'},500);
Schauen Sie sich diese Geige für ein vollständiges Beispiel an:
Wenn Sie den Text „reibungslos“ ändern möchten, können Sie zwei verwenden
<span>
s überlappen und etwas arbeiten. Oder wenn Sie nur Text „sofort“ ändern möchten, können Sie verwenden.text()
. PS: Sie können verwenden<span style="..">
für Styling statt<font ..>
.– JiminP
10. Juni 2011 um 11:33 Uhr