Agregar un elemento con desvanecimiento en efecto [jQuery]

121

var html = "<div id='blah'>Hello stuff here</div>"

$("#mycontent").append(html).fadeIn(999);

Esto no parece funcionar.

Solo quiero un efecto genial cuando el contenido se agrega.

Nota: Quiero que solo se desvanezca el nuevo div "bla", no todo el "mycontent".

— TIMEX
fuente

posible duplicado de Usar fadein y append

— usuario

262

$(html).hide().appendTo("#mycontent").fadeIn(1000);

— icktoofay
fuente

1

Quiero simplemente el nuevo div "bla" a desvanecerse en.

— TIMEX

@TIMEX: Eso es lo que debería hacer.

— icktoofay

¿Hay alguna razón por la que primero se esconde y luego se agrega (porque es más rápido establecer primero un estilo antes de adjuntarlo al DOM, o algo así) o no hace la diferencia?

— qwertymk

2

@qwertymk: No hay una razón real. Si los navegadores se procesaran mientras el DOM todavía estaba siendo manipulado (lo que ningún navegador hace actualmente hasta donde yo sé), no habría ningún destello del contenido antes de que comenzara a desvanecerse. De nuevo, no es realmente importante.

— icktoofay

1

@ArthurTarasov: Eso se agrega #blaha sí mismo, lo que no parece algo que quieras hacer (y supongo que se interpreta como un no-op). También podría soltar la .appendTopieza y usarla $('#mycontent').hide().fadeIn(1000).

— icktoofay

52

Agregando un poco más de información:

jQuery implementa "encadenamiento de métodos", lo que significa que puede encadenar llamadas de método en el mismo elemento. En el primer caso:

$("#mycontent").append(html).fadeIn(999);

estaría aplicando la fadeInllamada al objeto que es el objetivo de la cadena de métodos, en este caso #mycontent. No es lo que quieres.

En la respuesta (genial) de @ icktoofay tienes:

$(html).hide().appendTo("#mycontent").fadeIn(1000);

Esto básicamente significa, crear html, configurarlo como oculto por defecto, agregarlo #mycontenty luego desvanecerlo. El objetivo de la cadena de métodos ahora es en hmtllugar de #mycontent.

— Pablo Fernández
fuente

18

Esto tambien funciona

$(Your_html).appendTo(".target").hide().fadeIn(300);

Saludos

— Mohd Sakib
fuente

Esta es la forma más estética de manejar el desvanecimiento, ya que permite que el HTML esté completamente compuesto y cree las dimensiones que necesita antes de desvanecerse.

— Antonio Nogueras

0

dado que el fadeIn es una transición de ocultar a mostrar, deberá ocultar el elemento "html" cuando lo agregue y luego mostrarlo.

var html = "<div id='blah'>Hello stuff here</div>"

$("#mycontent").append(function(){
  return html.hide();
});

$('#blah').fadeIn(999);

Expandir fragmento

— cristisst
fuente