JQUERY fadeIn - Pourquoi fait-il clignoter toute l'UL, et non la LI en cours d'apposition?

Question

Dans le cas suivant:

$("#taglist").append('<li><a href="">' + v + '</a></li>').hide().fadeIn(); 

Pourquoi faut-il FADEIN la liste complète des LI taglist, et non juse le nouvel élément qui a été annexé est ce que je veux arriver?

Merci

Answer 1

.fadeIn() s'applique à la #taglist? Essayez le diviser en deux, et l'ajout d'une classe à la nouvelle li, puis en faisant

$('li.new_class_name').fadeIn(); 

Ou vous pouvez aussi être en mesure de faire

$('#taglist li:last').fadeIn(); 

Tout ce que vous préférez. Bien sûr, je suppose que dans le premier exemple, vous avez une logique d'itération/création du nouveau li, où vous pouvez ajouter un numéro à la nouvelle classe pour l'identifier pour le fadeIn. Le second exemple est plus pratique après avoir complété l'append. La beauté de jQuery, comme vous pouvez le voir dans toutes les réponses, est qu'il existe plusieurs façons d'aborder cette question.

Answer 2

Votre sélecteur jQuery cible l'UL et non le li. Essayez:

$('<li><a href="">' + v + '</a></li>').appendTo("#taglist").hide().fadeIn(); 

Answer 3

Parce que la plupart des méthodes en jquery, il renvoie l'objet initial pour permettre l'enchaînement des commandes ..

Utilisez le appendTo si vous devez le faire en une ligne ..

Answer 4

Comme la plupart des autres fonctions jQuery, append renvoie le ou les éléments d'origine sur lesquels il a été appelé.
Par conséquent, vous êtes en train de fondre la totalité <ul>.

Vous cherchez appendTo:

$('<li><a href="">' + v + '</a></li>').hide().appendTo("#taglist").fadeIn(); 

, vous avez également une vulnérabilité d'injection HTML via la variable v.

Answer 5

Cela a fini par fonctionner correctement.

   $("#taglist").append('<li><a href="">' + v + '</a></li>'); 
       $('#taglist').children(':last').hide().fadeIn();