web-dev-qa-db-de.com

Ändern Sie Text (HTML) mit .animate

Ich versuche, den HTML-Teil eines Tags (<font id="test" size="7">This Text!</font>) mit der Animate-Funktion von jQuery zu animieren:

$("#test").delay(1500).animate({text:'The text has now changed!'},500);

Es passiert jedoch nichts, der Text wird nicht geändert.

Wie kann ich das machen? Vielen Dank!

jqueryhtmltextjquery-animate
37
Jeff

Die Signatur der Funktion animate(..) lautet:

.animate( properties, options );

Und es sagt folgendes über den Parameter properties:

eigenschaften Eine Karte mit CSS-Eigenschaften, die Die Animation bewegt sich in Richtung.

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

Möchten Sie den Text ausblenden? Möchten Sie es verschieben? Ich könnte eine Alternative anbieten.

Schauen Sie sich die folgende Geige an.

73
Kevin

Ich habe vor ein paar Tagen nach so etwas gesucht, aber da ich nicht viel Zeit hatte, benutzte ich schließlich das einfachere fadeIn/fadeOut, wie andere geantwortet hatten.

Aber die Idee, Text zu animieren, hat mich nicht vergessen, und außerdem habe ich mein eigenes Plugin (jquery-bubble-text) codiert.

Sie können es auf github überprüfen oder dies jsfiddle sehen.

Die Syntax lautet wie folgt:

bubbleText({
    element: $element,      // must be one DOM leaf node
    newText: 'new Text',    // must be one string
});

Ich hoffe es gefällt euch :)

3
Washington Guedes
$("#test").hide(100, function() {
    $(this).html("......").show(100);
});
2
jalmatari

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 zunächst den Text ändern und dann die 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/

1
Twig

Dem Vorschlag von JiminP folgend ....

Ich habe ein jsFiddle erstellt, das den Übergang zwischen zwei Bereichen "reibungslos" ermöglicht, falls jemand daran interessiert ist, dies in Aktion zu sehen. Sie haben zwei Hauptoptionen:

  1. eine Spanne wird zur gleichen Zeit ausgeblendet wie. Die andere Spanne wird eingeblendet
  2. eine Spanne wird ausgeblendet gefolgt von der andere Spanne.

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

Probieren Sie es aus: http://jsfiddle.net/jWcLz/594/

Einzelheiten:

Nummer 1 oben (der schwierigere Effekt) wird erreicht, indem die Felder direkt über CSS mit absoluter Positionierung positioniert werden. Die jQuery-Animationen sind auch 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);
        });   
    }    
}
1
ClearCloud8

Für fadeOut => change text => 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 hilft jemandem.

1
denesis

siehe offizielles Jquery-Beispiel : und spiele damit.

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