Ajouter un élément avec effet de fondu [jQuery]

121

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

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

Cela ne semble pas fonctionner.

Je veux juste un effet sympa lorsque le contenu est ajouté.

Remarque: je veux juste que le nouveau div "blah" disparaisse, pas tout le "mycontent".

— TIMEX
source

duplication possible de Utilisation de fondu et ajout

— utilisateur

262

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

— icktoofay
source

1

Je veux juste que le nouveau div "blah" disparaisse.

— TIMEX

@TIMEX: C'est ce que cela devrait faire.

— icktoofay

Y a-t-il une raison pour laquelle vous commencez par masquer puis ajouter (parce qu'il est plus rapide de définir d'abord un style avant de l'attacher au DOM, ou quelque chose du genre) ou cela ne fait-il aucune différence?

— qwertymk

2

@qwertymk: Il n'y a pas de vraie raison. Si les navigateurs étaient rendus alors que le DOM était encore en cours de manipulation (ce qu'aucun navigateur ne fait actuellement pour autant que je sache), il n'y aurait pas de flash du contenu avant qu'il ne commence à disparaître. Encore une fois, pas vraiment important.

— icktoofay le

1

@ArthurTarasov: Cela s'ajoute #blahà lui-même, ce qui ne semble pas être quelque chose que vous voulez faire (et je suppose que c'est interprété comme un non-op). Vous pouvez tout aussi bien laisser tomber la .appendTopièce et l'utiliser $('#mycontent').hide().fadeIn(1000).

— icktoofay

52

Ajout d'un peu plus d'informations:

jQuery implémente le «chaînage de méthodes», ce qui signifie que vous pouvez enchaîner les appels de méthode sur le même élément. Dans le premier cas:

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

vous appliqueriez l' fadeInappel à l'objet qui est la cible de la chaîne de méthodes, dans ce cas #mycontent. Pas ce que tu veux.

Dans la (excellente) réponse de @ icktoofay, vous avez:

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

Cela signifie essentiellement, créez le html, définissez-le comme masqué par défaut, ajoutez-le #mycontentet ensuite fondez-le. La cible de la chaîne de méthodes est maintenant hmtlau lieu de #mycontent.

— Pablo Fernandez
source

18

Cela fonctionne également

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

Cordialement

— Mohd Sakib
source

C'est la façon la plus esthétique de gérer le fondu car il permet au HTML d'être entièrement composé et de créer les dimensions dont il a besoin avant de se fondre.

— Antonio Nogueras

0

puisque le fondu est une transition de masquer à afficher, vous devrez masquer l'élément "html" lorsque vous l'ajoutez et ensuite le montrer.

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

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

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

Développer l'extrait

— Cristisst
source