web-dev-qa-db-fra.com

Changer le texte (html) avec .animate

J'essaie d'animer la partie HTML d'une balise (<font id="test" size="7">This Text!</font>) à l'aide de la fonction Animate de jQuery, comme suit:

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

Cependant rien ne se passe, cela ne change pas le texte.

Comment puis-je faire ceci? Merci!

jqueryhtmltextjquery-animate
37
Jeff

La signature animate(..) function 'est:

.animate( properties, options );

Et il est écrit ce qui suit concernant le paramètre properties:

properties Une carte des propriétés CSS qui l'animation se déplacera vers.

text n'est pas une propriété CSS, c'est pourquoi la fonction ne fonctionne pas comme prévu.

Voulez-vous effacer le texte? Voulez-vous le déplacer? Je pourrais être en mesure de fournir une alternative.

Jetez un coup d’œil au au violon suivant .

73
Kevin

Je cherchais quelque chose comme ça il y a quelques jours, mais comme je n'avais pas beaucoup de temps, j'ai fini par utiliser le fadeIn/fadeOut, comme d'autres l'ont répondu.

Mais l'idée d'animer un texte ne m'a pas quitté l'esprit et j'ai ensuite codé mon propre plugin (nommé jquery-bubble-text).

Vous pouvez le vérifier sur github , ou voir ceci jsfiddle .

La syntaxe est la suivante:

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

Je espère que vous l'apprécierez :)

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

Si tout ce que vous cherchez à faire est de changer le texte, vous pouvez faire exactement ce que Kevin a dit. Mais si vous essayez d'exécuter une animation et de modifier le texte, vous pouvez le faire en modifiant d'abord le texte, puis en exécutant votre animation.

Par exemple: 

$("#test").html('The text has now changed!');
$("#test").animate({left: '100px', top: '100px'},500);

Découvrez ce violon pour un exemple complet:

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

1
Twig

Suite à la suggestion de JiminP ....

J'ai créé un jsFiddle qui assurera une transition "en douceur" entre deux périodes au cas où quelqu'un souhaiterait voir cela en action. Vous avez deux options principales:

  1. un intervalle disparaît en même temps que l'autre intervalle s'estompe
  2. un intervalle disparaît suivi de l'autre intervalle disparaît.

La première fois que vous cliquez sur le bouton, le numéro 1 ci-dessus apparaîtra. La deuxième fois que vous cliquez sur le bouton, le numéro 2 se produira. (Je l'ai fait pour que vous puissiez comparer visuellement les deux effets.)

Essayez-le: http://jsfiddle.net/jWcLz/594/

Détails:

Le numéro 1 ci-dessus (effet le plus difficile) est obtenu en positionnant les étendues les unes sur les autres via CSS avec un positionnement absolu. De plus, les animations jQuery ne sont pas chaînées afin de pouvoir s'exécuter en même temps.

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

Pour fadeOut => change text => fadeIn effect Nous devons animer le wrapper des textes que nous souhaitons modifier.

Exemple ci-dessous:

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

  });

});

J'espère que cela aidera quelqu'un.

1
denesis

référez-vous à exemple officiel de requête : et jouez avec.

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