javascript - ejemplos - jquery fadetoggle

Usar fadein y anexar

Question

Estoy cargando datos JSON en mi página y usando appendTo () pero estoy tratando de desvanecerme en mis resultados, ¿alguna idea?

$("#posts").fadeIn();
$(content).appendTo("#posts");

Vi que hay una diferencia entre append y appendTo, en los documentos.

Intenté esto también:

$("#posts").append(content).fadeIn();

Lo tengo, ¡lo de arriba hizo el truco!

Pero me pongo "indefinido" como uno de mis valores JSON.

Answer 1

Debe tener en cuenta que el código no se ejecuta linealmente. No se puede esperar que las cosas animadas detengan la ejecución del código para hacer la animación y luego regresar.

   commmand(); 
   animation(); 
   command();  

Esto se debe a que la animación usa el tiempo de espera establecido y otra magia similar para hacer su trabajo y settimeout no bloquea.

Es por eso que tenemos métodos de devolución de llamada en animaciones para ejecutar cuando se realiza la animación (para evitar cambiar algo que aún no existe)

command(); animation( ... function(){ command(); });

Answer 2

Esto debería resolver tu problema, creo.

$(''#content'').prepend(''<p>Hello!</p>'');
$(''#content'').children('':first'').fadeOut().fadeIn();

Si está haciendo un apéndice en su lugar, debe usar el último selector en su lugar.

Answer 3

No sé si entiendo completamente el problema que está teniendo, pero algo así debería funcionar:

HTML:

<div id="posts">
  <span id="post1">Something here</span>
</div>

Javascript:

var counter=0;

$.get("http://www.something/dir",
    function(data){
        $(''#posts'').append(''<span style="display:none" id="post'' + counter + ">" + data + "</span>" ) ;
        $(''#post'' + counter).fadeIn();
        counter += 1;
    });

Básicamente, estás envolviendo cada parte del contenido (cada "publicación") en un lapso, estableciendo la pantalla de ese tramo en ninguna para que no se muestre y luego lo desvanezcas.

Answer 4

Primero es convertir los datos recibidos a jQuery Object. En segundo lugar, ocultarlo de inmediato. Tercero, añádalo a un nodo objetivo. Y, después de todo esto, podemos usar claramente la animación necesaria, al igual que fadeIn :)

jNode = $("<div>first</div><div>second</div>");
jNode.hide();
$(''#content'').append(jNode);
jNode.fadeIn();

Answer 5

Si oculta el contenido antes de agregarlo y encadena el método fadeIn a eso, debe obtener el efecto que está buscando.

// Create the DOM elements
$(content)
// Sets the style of the elements to "display:none"
    .hide()
// Appends the hidden elements to the "posts" element
    .appendTo(''#posts'')
// Fades the new content into view
    .fadeIn();

Answer 6

Tengo un exprensive, para esto:

$("dt").append(tvlst.ddhtml);
$("dd:last").fadeIn(700);

Answer 7

asumiendo que tiene lo siguiente en el css definido:

.new {display:none} 

y el javascript debería ser:

$(''#content'').append(''<p class=''new''>Hello!</p>'');
$(''#content'').children(''.new'').fadeIn();
$(''#content'').children.removeClass(''new'');
$(''#content'').children(''.new'').hide();

Answer 8

Intenté lo que dijiste que hizo el truco, pero no está funcionando. funcionó con el siguiente código

$("div").append("content-to-add").hide().fadeIn();

Answer 9

$(output_string.html).fadeIn().appendTo("#list");