jQuery utilise append avec des effets

Question

Comment puis-je utiliser .append() avec des effets comme show('slow')

Ayant des effets sur append ne semble pas fonctionner du tout, et donne le même résultat que la normale. show() . Pas de transitions, pas d'animations.

Comment puis-je ajouter un div à un autre, et avoir une slideDown o show('slow') effet sur elle ?

Answer 1

Avoir des effets sur append ne fonctionnera pas car le contenu affiché par le navigateur est mis à jour dès que le div est ajouté. Donc, pour combiner les réponses de Mark B et de Steerpike :

Donnez un style caché à la division que vous allez ajouter avant de l'ajouter réellement. Vous pouvez le faire avec une CSS script en ligne ou externe, ou simplement créer la div en tant que

<div id="new_div" style="display: none;"> ... </div>

Puis vous pouvez enchaîner des effets à votre appendice ( Démonstration ) :

$('#new_div').appendTo('#original_div').show('slow');

Ou ( Démonstration ) :

var $new = $('#new_div');
$('#original_div').append($new);
$new.show('slow');

Answer 2

L'essence est la suivante :

1. Tu appelles "append" sur le parent.
2. mais vous voulez appeler 'show' sur le nouvel enfant

Cela fonctionne pour moi :

var new_item = $('<p>hello</p>').hide();
parent.append(new_item);
new_item.show('normal');

ou :

$('<p>hello</p>').hide().appendTo(parent).show('normal');

Answer 3

Une autre façon de travailler avec des données entrantes (comme celles d'un appel ajax) :

var new_div = $(data).hide();
$('#old_div').append(new_div);
new_div.slideDown();

Answer 4

Quelque chose comme :

$('#test').append('<div id="newdiv">Hello</div>').hide().show('slow');

devrait le faire ?

Edit : désolé, erreur dans le code et j'ai aussi pris en compte la suggestion de Matt.

Answer 5

Définissez la div ajoutée pour qu'elle soit initialement cachée par le biais de css. visibility:hidden .