Anexar um elemento com efeito de desvanecimento [jQuery]

121

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

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

Isso não parece funcionar.

Eu só quero um efeito legal quando o conteúdo for anexado.

Nota: quero que apenas a nova div "blah" apareça, não o "mycontent" inteiro.

— TIMEX
fonte

possível duplicata de Using fadein and append

— user

262

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

— icktoofay
fonte

1

Quero apenas o novo div "blah" fade in.

— TIMEX

@TIMEX: Isso é o que isso deve fazer.

— icktoofay

Existe uma razão pela qual você primeiro oculta e depois acrescenta (porque é mais rápido definir primeiro um estilo antes de se conectar ao DOM, ou algo assim) ou isso não faz diferença?

— precisa saber é o seguinte

2

@qwertymk: Não há motivo real. Se os navegadores renderizarem enquanto o DOM ainda está sendo manipulado (o que nenhum navegador atualmente faz, tanto quanto eu sei), não haveria nenhum flash do conteúdo antes que ele começasse a aparecer. Novamente, não é realmente importante.

— icktoofay

1

@ArthurTarasov: Isso se acrescenta #blaha si mesmo, o que não parece ser algo que você deseja fazer (e acho que é interpretado como não-operacional). Você também pode simplesmente soltar a .appendTopeça e usá-la $('#mycontent').hide().fadeIn(1000).

— Icktoofay

52

Adicionando um pouco mais de informação:

O jQuery implementa "encadeamento de métodos", o que significa que você pode encadear chamadas de métodos no mesmo elemento. No primeiro caso:

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

você aplicaria a fadeInchamada ao objeto que é o alvo da cadeia de métodos, nesse caso #mycontent. Não é o que você quer.

Na (ótima) resposta do @ icktoofay você tem:

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

Basicamente, isso significa criar html, defini-lo como oculto por padrão, anexá-lo #mycontente inseri-lo em seguida . O destino da cadeia de métodos agora é em hmtlvez de #mycontent.

— Pablo Fernandez
fonte

18

Isso também funciona

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

Saudações

— Mohd Sakib
fonte

Esta é a forma mais esteticamente agradável para lidar com o aparecimento gradual, pois permite o HTML para ser totalmente composta e criar as dimensões de que necessita antes de desaparecer no.

— Antonio Nogueras

0

como o fadeIn é uma transição de ocultar para mostrar, você precisará ocultar o elemento "html" ao anexá-lo e depois mostrá-lo.

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

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

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

Expandir snippet

— cristisst
fonte