Ich habe ein div mit einem CSS-Stil, um es als eine Schaltfläche zu zeigen:
%Vor%Und CSS-Stile:
%Vor%Ich möchte Text innerhalb von div ausblenden, Text ändern und dann den Text erneut einblenden. Aber ich möchte nicht ein- und ausblenden div.
Wenn ich diesen JavaScript-Code verwende:
%Vor%Ich werde div und Text innen ausblenden.
Wie kann ich das tun?
Sie möchten den Text in einen Bereich einschließen und dann ausblenden:
%Vor% und Sie möchten fadeOut nicht verwenden, da dies die Größe Ihrer Schaltfläche ändert, da der Text verschwindet, sobald fadeOut endet und keinen Platz mehr einnimmt. Stattdessen animiere die Deckkraft:
BEARBEITEN: Leichte Korrektur, solange Sie sofort wieder einblenden, scheint es kein Problem zu sein, fadeIn und fadeOut zu benutzen, zumindest in Chrome. Ich würde vielleicht in kleineren Browsern ein leichtes Flimmern sehen, könnte aber falsch liegen.
Möglicherweise ein bisschen sauberer mit der Warteschlange, um Rückrufe zu vermeiden:
%Vor%Versuchen Sie es mit der Funktion contents () . Und wrap () den Inhalt mit einem anderen Element. wie
%Vor%Hier ist eine einfache Demo Ссылка
Sie könnten den Text "Word 1" in ein span oder div einfügen, etwa so:
%Vor%Dann innerhalb Ihrer WordClicked () Funktion tun:
%Vor% promise () ist hier nützlich, aber Sie müssen auch den Inhalt umbrechen. In diesem Beispiel wird span erstellt, aber auch nach der Animation entfernt. Sie müssen also Ihr Markup weder ändern noch ändern, nachdem die Animation abgeschlossen ist.
Beispiel: Ссылка
edit oder ... hätte es einfach mit den Fade-Callbacks gemacht. Immer noch nützlich, wenn Sie weitere Animationseffekte hinzufügen möchten.
%Vor%Beispiel: Ссылка