Text (html) mit .animate ändern

Lesezeit: 6 Minuten

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 ..>.

    – JiminP

    10. Juni 2011 um 11:33 Uhr


Benutzer-Avatar
Kevin

Das animate(..) Die Signatur der Funktion lautet:

.animate( properties, options );

Und es sagt folgendes über den Parameter properties:

properties Eine Karte von CSS-Eigenschaften, auf die sich die Animation zubewegt.

text keine CSS-Eigenschaft ist, deshalb funktioniert die Funktion nicht wie erwartet.

Möchten Sie den Text ausblenden? Möchten Sie es verschieben? Eventuell kann ich eine Alternative anbieten.

Schauen Sie sich die an folgende Geige.

  • Ich möchte, dass sich der Text ändert, mit dem Effekt, dass der alte Text ausgeblendet wird, während der neue Text eingeblendet wird 🙂

    – Jeff

    10. Juni 2011 um 11:50 Uhr

  • Tolle und einfache Lösung. Vielen Dank.

    – Rasmus Søborg

    27. Dezember 2012 um 23:14 Uhr

  • Wie bringen Sie den alten Text zurück, wenn der Cursor weg schwebt?

    – verlorene Seele29

    29. November 2016 um 1:22 Uhr

  • Warum einen externen Link verwenden, wenn es nur ein paar Codezeilen sind?

    – minhle_r7

    14. Januar 2019 um 15:47 Uhr

Benutzer-Avatar
Jalmatari

$("#test").hide(100, function() {
    $(this).html("......").show(100);
});

Aktualisiert:

Ein weiterer einfacher Weg:

$("#test").fadeOut(400, function() {
    $(this).html("......").fadeIn(400);
});

  • 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);    
    });

Live-Beispiel

Dem Vorschlag von JiminP folgend….

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:

  1. eine Spanne wird ausgeblendet zur gleichen Zeit wie die andere Spanne wird eingeblendet
  2. 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.)

Versuch es: http://jsfiddle.net/jWcLz/594/

Einzelheiten:

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.

HTML

<div class="onTopOfEachOther">
    <span id='a'>Hello</span>
    <span id='b' style="display: none;">Goodbye</span>
</div>

<br />
<br />

<input type="button" id="btnTest" value="Run Test" />

CSS

.onTopOfEachOther {
    position: relative;
}
.onTopOfEachOther span {
    position: absolute;
    top: 0px;
    left: 0px;
}

JavaScript

$('#btnTest').click(function() {        
    fadeSwitchElements('a', 'b');    
}); 

function fadeSwitchElements(id1, id2)
{
    var element1 = $('#' + id1);
    var element2 = $('#' + id2);

    if(element1.is(':visible'))
    {
        element1.fadeToggle(500);
        element2.fadeToggle(500);
    }
    else
    {
         element2.fadeToggle(500, function() {
            element1.fadeToggle(500);
        });   
    }    
}

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:

http://jsfiddle.net/Twig/3krLh/1/

  • Eigentlich können Sie die Funktionen Curry: $(...).html(...).animate(...);

    – Washington Guedes

    21. Juni 2016 um 18:29 Uhr

Benutzer-Avatar
denesis

Für fadeOut => Text ändern => FadeIn-Effekt Wir müssen den Wrapper von Texten animieren, die wir ändern möchten.

Beispiel unten:

HTML

<div class="timeline-yeardata">
  <div class="anime">
    <div class="ilosc-sklepow-sticker">
      <span id="amount">1400</span><br>
      sklepów
    </div>

    <div class="txts-wrap">
      <h3 class="title">Some text</h3>
      <span class="desc">Lorem ipsum description</span>
    </div>

    <div class="year-bg" id="current-year">2018</div>
  </div>
</div>


<div class="ch-timeline-wrap">
  <div class="ch-timeline">
    <div class="line"></div>

    <div class="row no-gutters">
      <div class="col">
        <a href="#2009" data-amount="9" data-y="2009" class="el current">
          <span class="yr">2009</span>
          <span class="dot"></span>

          <span class="title">Lorem  asdf asdf asdf a</span>
          <span class="desc">Ww wae awer awe rawer aser as</span>
        </a>
      </div>
      <div class="col">
        <a href="#2010" data-amount="19" data-y="2010" class="el">
          <span class="yr">2010</span>
          <span class="dot"></span>

          <span class="title">Lorem brernern</span>
          <span class="desc">A sd asdkj aksjdkajskd jaksjd kajskd jaksjd akjsdk jaskjd akjsdkajskdj akjsd k</span>
        </a>
      </div>
    </div>
  </div>
</div>

JQuery JS

$(document).ready(function(){

  $('.ch-timeline .el').on('click', function(){

    $('.ch-timeline .el').removeClass('current');
    $(this).addClass('current');

    var ilosc = $(this).data('ilosc');
    var y = $(this).data('y');
    var title = $(this).find('.title').html();
    var desc = $(this).find('desc').html();

    $('.timeline-yeardata .anime').fadeOut(400, function(){
      $('#ilosc-sklepow').html(ilosc);
      $('#current-year').html(y);
      $('.timeline-yeardata .title').html(title);
      $('.timeline-yeardata .desc').html(desc);
      $(this).fadeIn(300);
    })

  });

});

Hoffe, das wird jemandem helfen.

  • Eigentlich können Sie die Funktionen Curry: $(...).html(...).animate(...);

    – Washington Guedes

    21. Juni 2016 um 18:29 Uhr

Benutzer-Avatar
wpcoder

beziehen auf offizielles Jquery-Beispiel: und damit spielen.

.animate({
    width: "70%",
    opacity: 0.4,
    marginLeft: "0.6in",
    fontSize: "3em",
    borderWidth: "10px"
  }, 1500 );

1257270cookie-checkText (html) mit .animate ändern

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy