Estoy tratando de animar la parte de html de una etiqueta ( <font id="test" size="7">This Text!</font> ) usando jQuery Animate función, así:

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

Sin embargo no pasa nada, no cambia el texto.

¿Cómo puedo hacer esto? Gracias!

  • Si desea cambiar el texto «sin problemas», es posible que el uso de dos <span>s superpuestas y hacer algo de trabajo. O si solo quieres cambiar el texto ‘al instante’, puede usar .text(). PS : Usted puede utilizar <span style=".."> por el estilo en lugar de <font ..>.
InformationsquelleAutor Jeff | 2011-06-10

7 Comentarios

  1. 76

    La animate(..) función de la firma es:

    .animate( properties, options );

    Y dice lo siguiente sobre el parámetro properties:

    propiedades de Un mapa de propiedades CSS que
    la animación se mueve hacia.

    text no es una propiedad de CSS, es por eso que la función no está funcionando como se esperaba.

    ¿Quieres desvanecer el texto? ¿Quieres mover? Yo podría ser capaz de proporcionar una alternativa.

    Tener una mirada en el siguiente violín.

    • Me gustaría que el texto cambie, con el efecto de que el texto antiguo se desvanece, mientras que el nuevo texto se desvanece en el 🙂
    • He actualizado mi respuesta, tener una mirada en el violín.
    • Hay que ir, saludos! 🙂
    • Genial y sencilla solución. Gracias.
    • ¿Cómo hacer que el texto antiguo volver cuando el usuario mueva el ratón de distancia?
    • ¿por qué utilizar un enlace externo, mientras que sólo unas líneas de código?

  2. 3

    Yo estaba buscando algo así hace unos días, pero como no he tenido mucho tiempo, que terminó con la más fácil fadeIn/fadeOut, como otros habían respondido.

    Pero la idea de animar texto no salió de mi mente y que me codificado mi propio plugin (nombre jquery-burbuja de texto).

    Se puede comprobar en github, o ver este jsfiddle.

    La sintaxis es la siguiente:

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

    Espero que os guste 🙂

  3. 3
    $("#test").hide(100, function() {
        $(this).html("......").show(100);
    });
    • de nuevo, abajo los votantes en todas partes, he utilizado este código en producción con una ligera modificación. +1. Abajo-votantes: por Favor, probar todo el código antes de la votación. ofender!
    • Yo no voto en esta respuesta, pero supongo que fue votada abajo porque es simplemente mostrar algunos de código sin ningún tipo de explicación. Algunos usuarios downvote respuestas sin explicación como la baja calidad de la respuesta.
    • El punto es que la dosis de responder a ayudar o no, y eso me ayudó , acaba de cambiar .show(1000) y funcionó.
    • Con un fadeIn-fadeOut en lugar de ocultar-mostrar parece más suave, pero es una buena solución
  4. 1

    Siguiendo la sugerencia de JiminP….

    Hice un jsFiddle que «suavemente» de transición entre los dos grupos en caso de que alguien esté interesado en ver esto en acción. Usted tiene dos opciones principales:

    1. uno de ellas se desvanece al mismo tiempo como el otro lapso se desvanece en
    2. uno de ellas se desvanece seguido por el otro lapso se desvanezca.

    La primera vez que haga clic en el botón, el número 1 anterior se producen. La segunda vez que pulse el botón, el número 2 se va a producir. (Yo lo hice de esta manera usted puede comparar visualmente los dos efectos.)

    Probarlo: http://jsfiddle.net/jWcLz/594/

    Detalles:

    Número 1 anterior (la más difícil de efecto) se logra mediante la colocación de las luces directamente en la parte superior de uno al otro a través de CSS con posicionamiento absoluto. También, el jQuery anima no están encadenados entre sí, de modo que se pueden ejecutar al mismo tiempo.

    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);
            });   
        }    
    }
  5. 1

    Si todo lo que usted está buscando para hacer es cambiar el texto que usted podría hacer exactamente como Kevin ha dicho. Pero si usted está tratando de ejecutar una animación así como cambiar el texto que usted podría lograr esto, primero cambiar el texto, a continuación, ejecuta la animación.

    Por Ejemplo:

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

    Echa un vistazo a este violín para ejemplo completo:

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

    • En realidad, usted puede curry de las funciones: $(...).html(...).animate(...);
  6. 1

    Para fadeOut => cambiar el texto => efecto fadeIn
    Tenemos que animar el contenedor de textos que nos gustaría cambiar.

    Ejemplo a continuación:

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

    Espero que esto ayude a alguien.

Dejar respuesta

Please enter your comment!
Please enter your name here