cambiar el texto (HTML) con .animate

Question

que estoy tratando de animar la parte HTML de una etiqueta (<font id="test" size="7">This Text!</font>) utilizando la función de Animación de jQuery, 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!

Answer 1

La firma animate(..) función' es:

.animate(properties, options); 

Y dice lo siguiente acerca del parámetro properties:

propiedades Un mapa de las propiedades CSS que la animación se moverá hacia.

text no es una propiedad de CSS, esta es la razón por la cual la función no está funcionando como esperaba.

¿Desea atenuar el texto? ¿Quieres moverlo? Podría ser capaz de proporcionar una alternativa.

Eche un vistazo a following fiddle.

Answer 2

Siguiendo la sugerencia de JiminP ....

hice un jsFiddle que lo hará "sin problemas" de transición entre dos vanos por si alguien está interesado en ver esto en acción. Tiene dos opciones principales:.

1. un palmo desvanece al mismo tiempo que otro lapso se está desvaneciendo en
2. un palmo desvanece seguido de otro período de aumento gradual

La primera vez que haga clic en el botón, se producirá el número 1 anterior. La segunda vez que haga clic en el botón, se producirá el número 2. (Hice esto para que pueda comparar visualmente los dos efectos.)

Pruébelo: http://jsfiddle.net/jWcLz/594/

Detalles:

número 1 anterior (el efecto más difícil) se lleva a cabo mediante la colocación los tramos directamente uno encima del otro a través de CSS con un posicionamiento absoluto. Además, los animes de jQuery no están encadenados juntos, por lo 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); 
     }); 
    }  
} 

Answer 3

Si todo lo que está buscando que hacer es cambiar el texto que podría hacer exactamente lo que Kevin ha dicho. Pero si intentas ejecutar una animación y cambiar el texto, puedes lograrlo cambiando primero el texto y luego ejecutando tu animación.

Por ejemplo:

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

Control hacia fuera este violín por completo ejemplo:

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

Answer 4

que estaba buscando algo así hace unos días, pero ya que no tenían mucho tiempo, terminé usando el fadeIn/fadeOut más fácil, como otros habían respondido.

Pero la idea de animar el texto no me abandonó y codifiqué mi propio complemento (llamado jquery-bubble-text).

Puede verificarlo en github, o vea 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 lo disfruten :)

Answer 5

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

Answer 6

se refieren a official jquery example: y jugar con él.

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